javascript - 如何使用 jQuery 或 JavaScript 将属性更改为整个类的元素？

Question

我想将一个属性更改为许多具有相同类的元素。

我有很多带有“data-lc-categories= all”属性的“a”标签。

我想将该属性 (data-lc-categories) 更改为所有具有一类动画的 a 标签为 data-lc-categories = "animation"。

我的问题是，如果我尝试使用 id 选择元素，它会使用:

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

或

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

但是当我尝试使用

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

或

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

它不起作用。

<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>

Answer 1

普通 JS 版本不起作用，因为 getElementsByClassName() 返回一个 nodeList。因此，您不能对其调用 setAttribute()。您需要逐个循环遍历元素并逐个调用它们的方法，如下所示:

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

jQuery 版本不起作用，因为您需要用逗号而不是冒号分隔参数:

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