Question

我无法理解为什么我的简单jquery代码无法识别。当用户单击选项卡时，该函数会设置切换选项卡的类。我使用过滤器而不是方法来确定单击了哪个选项卡。类似的代码行之前适用于我，但它似乎不适用于我的新代码。该函数可以很好地捕获元素的id，但filter参数不起作用。

请对包含过滤方法的语句提供一些见解。在我的示例代码中，如果我单击选项卡1，我如何让它做某事（即添加类）？ jsfiddle link

编辑：请说明我的filter语句不起作用的原因，我将not组合使用它来过滤进出元素，这对我来说很有用。见link

TIA

    $(function(){

    $('.tabbar').click(function(event){ 
        var id = event.target.id;
          $('.tabbar').filter('#'+id).addClass("tabn");
          //alert(id);
    });
});

HTML代码

    <div class="tabbar" > <span name="tabs" class="tabm" id="tab1"  >tab 1</span>
<span name="tabs" class="tabn" id="tab2"  >tab 2</span> 
      </div>

Answer 1

$('.tabbar').click(function(event){
    // you can use $(this) to get the clicked element
    $(".tabbar span").removeClass("tabn"); // remove the class from other tabs
    $(this).addClass("tabn"); //and add to the current one
});

Answer 2

  $('.tabbar').filter('#'+id).addClass("tabn");

搜索具有类.tabbar和id id的元素。您想在该课程中进行搜索，以便使用：

  $('.tabbar').find('#'+id).addClass("tabn");

如果要切换，请将addClass更改为toggleClass。

但是，由于id是唯一的，因此使用起来更快：

  $('#'+id).addClass("tabn");

由于event.target引用了DOM元素，因此使用它的速度更快

  $(event.target).addClass("tabn");

并且从不担心身份。

jQuery过滤器语法疑难解答

2 个答案: