设置活动元素和非活动元素(动态)

Set Element active and the other inactive (dynamic)

本文关键字：元素 动态 活动 设置 非活动      更新时间：2023-09-26

我有一个列表框

<div id="listboxid1" class="listboxFilters">
  <div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test2</div>     <div class="listboxChosenFilter">3</div>   </div>
  <div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">test</div>     <div class="listboxChosenFilter">*</div>   </div>
  <div class="listboxFilterItem"> <div style="padding-top:2px; float: left;">gro</div>     <div class="listboxChosenFilter">2</div>   </div>
</div>

它是一个普通的列表框，现在的问题是，我如何才能只设置一个元素为活动，而其他元素为非活动

我的第一个猜测是一个项目上的onclick，我添加了一个名为active的类名，然后我为listboxid1元素做一个foreach并将所有设置为inactive，但这真的是常见和最好的方法吗?: 

 <script>
  function clearAll(element) {
    element.each(function () {
      var checkboxes = $(this).children("div");
      checkboxes.each(function () {
        var checkbox = $(this);
        checkbox.removeClass("active");
      });
    });
  }
  jQuery.fn.multiselecter = function () {
    $(this).each(function () {
      var checkboxes = $(this).children("div");
      checkboxes.each(function () {
        var checkbox = $(this);
        checkbox.click(function () {
          clearAll(checkbox.parent());
          checkbox.addClass("active");
        });
      });
    });
  };
  $("#listbox1").multiselecter();


</script>

我猜你正在使用jQuery，所以试试这个函数:

点击类别为.listboxFilterItem的任何项目调用setActive功能

$('.listboxFilterItem').click(setActive($(this)));
function setActive(var elem){
    $('.listboxFilterItem').each(function(){
       $(this).removeClass('active'); 
    });
    elem.addClass('active');
}

试试这个:

$(".listboxFilterItem").click(function (e) {
    $(".listboxFilterItem").removeClass("active");
    // or $(".active").removeClass("active");
    $(this).addClass("active");
});

在jsfiddle上检查

$(this) -被点击的元素
$(this).siblings() -所有他的邻居，除了他自己。

$(".listboxFilterItem").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
});
相关文章：