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');

所单击的元素更改了类，但我希望同一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;
}

Answer 1

您的HTML中没有data-favourite属性，如果您想更改所有data-specimen的类，则应该像这样使用$("[data-specimen='"+ fav +"']")：

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

.favourite {
  background-color: yellow;
}

.favourite_selected {
  background-color: green;
}

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

Answer 2

您的代码有2个问题。

1：您正在使用$（this）选择单个元素，然后添加和删除类。这就是为什么仅在单击的元素类上进行更新的原因。

2：您使用错误的数据收藏夹属性来选择元素，需要使用数据标本。

$('#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>

jQuery查找和更改具有数据属性的所有元素的类

2 个答案: