javascript - 将元素设置为事件状态，将其他元素设置为非事件状态(动态)

Question

我有一个列表框

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

它是一个普通的列表框，现在的问题是，我怎样才能只将一个元素设置为事件，然后将其他元素设置为非事件

我的第一个猜测是对一个项目的onlick，我添加了一个名为active的类名，然后我对listboxox1元素进行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>

Answer 1

我猜你正在使用 jQuery，所以试试这个功能:

单击任何具有 .listboxFilterItem 类的项目时，调用 setActive 函数

$('.listboxFilterItem').click(setActive($(this)));

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