Je veux changer un attribut en beaucoup d'éléments qui ont tous la même classe.

J'ai beaucoup de balises "a" avec un attribut "data-lc-categories = all".

Je veux changer cet attribut (data-lc-categories) en toutes les balises a avec une classe d'animation en data-lc-categories = "animation".

Mon problème est que si j'essaie de sélectionner les éléments en utilisant un identifiant, cela fonctionne en utilisant:

setAttribute('data-lc-categories', 'animation'); // javascript

OU

$('#test1').attr({
    "data-lc-categories": "animation",
    "title": "some title"
}); // jQuery

mais quand j'essaye avec

document.getElementsByClassName(".img_portfolio_animation")
 .setAttribute('data-lc-categories', 'animation');

OU

$('.animation').attr("data-lc-categories": "animation") 

ça ne marche pas.

<div class="new_filter_btns_container">
    <ul>
         <li id="filter_All" class="filter_btn">All</li>
         <li id="filter_animations" class="filter_btn">Animations</li>
         <li id="filter_interior" class="filter_btn">Interior Renders</li>
    </ul>
</div>

<a id="test1" class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="animation all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Animation</a>
<a class="interior all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
<a class="interior all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
<a class="interior all"     href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
<a class="interior all" href="" data-rel="lightcase:myCollection" data-lc-categories="All">Interior</a>
1
Tudor Constantinescu 4 nov. 2019 à 18:39

1 réponse

Meilleure réponse

La version JS standard ne fonctionne pas car getElementsByClassName() renvoie une nodeList. Vous ne pouvez donc pas appeler setAttribute() dessus. Vous devez parcourir les éléments individuellement et appeler la méthode l'un après l'autre, quelque chose comme ceci:

var elements = document.getElementsByClassName(".img_portfolio_animation");
for (var i = 0; i < elements.length; i++) {
  elements[i].setAttribute('data-lc-categories', 'animation');
}

La version jQuery ne fonctionne pas simplement parce que vous devez séparer les arguments par une virgule, pas par deux points:

$('.animation').attr("data-lc-categories", "animation") 
2
Rory McCrossan 4 nov. 2019 à 15:43