I'm wondering if there is anything wrong with using very large/long data-attributes to change the content of a website-element?
Here's am example that uses data-attributes to store and display different language versions of a text:
$(document).ready(function() {
$(".content").children("p").text($(".content").data("content-de"));
})
$("button").on("click", function() {
var lang = $(this).data("lang");
var content = $(".content").data("content-" + lang);
//
$(".content").children("p").text(content);
})button.de::after {
content: "German";
}
button.en::after {
content: "English";
}
button.fr::after {
content: "French";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<!-- Controls -->
<div>
<button class="de" data-lang="de"></button>
<button class="en" data-lang="en"></button>
<button class="fr" data-lang="fr"></button>
</div>
<!-- Content -->
<div class="content"
data-content-de="Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen."
data-content-en="One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment."
data-content-fr="En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine.">
<p></p>
</div>
</div>Using data attributes Issues:
Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.
The main issues to consider are Internet Explorer support and performance. Internet Explorer 11+ provides support for the standard, but all earlier versions do not support dataset. To support IE 10 and under you need to access data attributes with getAttribute() instead. Also, the performance of reading data-attributes compared to storing this data in a regular JS object is poor.
Instead you can use an object to hold the data like the following way:
var data = {
"de":"Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen.",
"en":"One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.",
"fr":"En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine."
};
$(document).ready(function() {
var de = data.de;
$(".content > p").text(de);
})
$("button").on("click", function() {
var lang = $(this).data("lang");
//
$(".content > p").text(data[lang]);
})button.de::after {
content: "German";
}
button.en::after {
content: "English";
}
button.fr::after {
content: "French";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<!-- Controls -->
<div>
<button class="de" data-lang="de"></button>
<button class="en" data-lang="en"></button>
<button class="fr" data-lang="fr"></button>
</div>
<!-- Content -->
<div class="content">
<p></p>
</div>
</div>