javascript - JQuery查找并更改具有数据属性的所有元素的类

Question

我尝试了各种方法来查找具有特定数据属性的所有元素以更改它们的类。目前我有这个，它不适用于同一个父 div 上的其他元素，#search_list_container：

$( '#search_list_container' ).on( 'click', '.favourite', function () {
            $(this).removeClass('favourite');
            $(this).addClass('favourite_selected');
            var fav = $(this).attr( 'data-specimen');
            $("[data-favourite='"+ fav +"']").removeClass('favourite');
            $("[data-favourite='"+ fav +"']").addClass('favourite_selected');

特别是线条

$("[data-favourite='"+ fav +"']").removeClass('favourite');
$("[data-favourite='"+ fav +"']").addClass('favourite_selected');

单击的元素更改类 OK，但我希望同一 div ( #search_list_container) 上的其他元素也更改类。

HTML 是：

    <div id='search_list_container'>
                <div id='search_list_container_left'></div>
<div class="favourite" data-specimen="586" title="Toggle as Favourite"></div>
                <div id='search_list_container_right'></div>
<div class="favourite" data-specimen="586" title="Toggle as Favourite"></div>
            </div>

左边的元素没有变化，但右边的元素是。它们具有相同的数据属性。

CSS：

.favourite{
    background: url(../images/favourite_plain.png) no-repeat center;
    width:20px;
    height:17px;
    margin-left:20px;
    cursor:pointer;
    float:left;
}

.favourite_selected{
    background: url(../images/favourite_selected.png) no-repeat center;
    width:20px;
    height:17px;
    margin-left:20px;
    cursor:pointer;
    float:left;
}

标签： javascriptjqueryhtmlcss

Answer 1

您的代码有 2 个问题。

1：您正在使用 $(this) 选择单个元素，然后添加和删除类。这就是为什么只有点击的元素类才会更新。

2：你使用了错误的属性data-favourite来选择元素，你需要使用data-specimen。

$('#search_list_container' ).on( 'click', '.favourite', function () {
            var fav = $(this).attr( 'data-specimen');
            $("[data-specimen='"+ fav +"']").removeClass('favourite');
            $("[data-specimen='"+ fav +"']").addClass('favourite_selected');
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id='search_list_container'>
                <div id='search_list_container_left'></div>
<div class="favourite" data-specimen="586" title="Toggle as Favourite">First</div>
                <div id='search_list_container_right'></div>
<div class="favourite" data-specimen="586" title="Toggle as Favourite">Second</div>
            </div>