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的类名，然后我会为listboxid1元素做一个foreach并将all设置为非活动状态，但这真的是常见且最好的方法吗？：

 <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课程的anyitem，调用setActive函数

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

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

Answer 2

试试这个：

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

    $(this).addClass("active");
});

在jsfiddle

上查看此内容

Answer 3

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

$(".listboxFilterItem").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
});

设置元素激活而另一个激活（动态）

3 个答案: