jQuery选择器 - “这个”还是“数据”？

Question

我想选择一堆个别元素。 我用addClass，toggleClass，removeClass完成了简单的jquery，而且我已经很好了。 但是如果我继续沿着这条路走下去，我的JS将会有很多带有toggleClass的.click函数。

我怎样才能一次只定位一个元素？ 目前它打开了所有三个选择器元素。 最终，这将构建为更大的东西，但对于这一部分，我需要以更通用的方式定位特定元素。 我认为数据属性需要存储在变量或其他内容中，然后在单击时选择元素时以这种方式引用。 但我不知道该怎么做。

这是我的代码：

 $('.picker .container header').click(function() { $('.picker .pick').toggleClass('show'); $('.picker .container header').toggleClass('minus'); }); 

 .picker { display: inline-block; vertical-align: top; } .picker { width: 20%; margin-right: 10px; } .picker .container { width: 100%; } .picker .container header { color: #fff; background-color: #000; padding: 10px; transition: .4s ease-in; text-transform: uppercase; font-weight: bold; margin-bottom: 10px; cursor: pointer; } .picker .container header.minus:after, .picker .container header:after { font-family: fontawesome; margin-left: 10px; } .picker .container header:after { content: "\\f055"; } .picker .container header.minus:after { content: "\\f056"; } .picker .pick { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="picker"> <div class="container"> <h1 class="buildit">Build Your Own Site:</h1> </div> <!-- ********** PICK YOUR MENU ********** --> <div class="container"> <header>Pick Your Menu Style:</header> <div class="navpick pick" data-pick="navpicker"> <ul> <li class="btn btn-default" id="fixedtop">Fixed Top</li> <li class="btn btn-default" id="statictop">Static Top Navbar</li> <li class="btn btn-default" id="static">Static Navbar</li> </ul> </div> </div> <!-- ********** PICK YOUR HERO ********** --> <div class="container"> <header>Pick Your Hero Style:</header> <div class="heropick pick" data-pick="heropicker"> <ul> <li class="btn btn-default" id="bggifness">Background GIF</li> <li class="btn btn-default" id="bgvid">Background Video</li> <li class="btn btn-default" id="narrow">Fixed Width</li> <li class="btn btn-default" id="jumbo">Jumbotron</li> <li class="btn btn-default" id="slider">Slider</li> </ul> </div> </div> <!-- ********** PICK YOUR LAYOUT ********** --> <div class="container"> <header>Pick Your Layout:</header> <div class="layoutpick pick" data-pick="layoutpicker"> <ul> <li class="btn btn-default" id="magazine">Magazine</li> <li class="btn btn-default" id="prod2">2 product</li> <li class="btn btn-default" id="prod3">3 product</li> <li class="btn btn-default" id="prod4">4 product</li> </ul> </div> </div> </div> 

Answer 1

使用this和next()方法仅定位紧随其后的元素：

$('.picker .container header').click(function() {
  $(this).next('.pick').toggleClass('show');
  $(this).toggleClass('minus');
});

或链接操作：

$('.picker .container header').click(function() {
  $(this).toggleClass('minus').next('.pick').toggleClass('show');
});

 $(function() { $('.picker .container header').click(function() { $(this).toggleClass('minus').next('.pick').toggleClass('show'); }); }); 

 .picker { display: inline-block; vertical-align: top; } .picker { /* width: 20%; */ margin-right: 10px; } .picker .container { width: 100%; } .picker .container header { color: #fff; background-color: #000; padding: 10px; transition: .4s ease-in; text-transform: uppercase; font-weight: bold; margin-bottom: 10px; cursor: pointer; } .picker .container header.minus:after, .picker .container header:after { font-family: fontawesome; margin-left: 10px; } .picker .container header:after { content: "\\f055"; } .picker .container header.minus:after { content: "\\f056"; } .picker .pick { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="picker"> <div class="container"> <h1 class="buildit">Build Your Own Site:</h1> </div> <!-- ********** PICK YOUR MENU ********** --> <div class="container"> <header>Pick Your Menu Style:</header> <div class="navpick pick" data-pick="navpicker"> <ul> <li class="btn btn-default" id="fixedtop">Fixed Top</li> <li class="btn btn-default" id="statictop">Static Top Navbar</li> <li class="btn btn-default" id="static">Static Navbar</li> </ul> </div> </div> <!-- ********** PICK YOUR HERO ********** --> <div class="container"> <header>Pick Your Hero Style:</header> <div class="heropick pick" data-pick="heropicker"> <ul> <li class="btn btn-default" id="bggifness">Background GIF</li> <li class="btn btn-default" id="bgvid">Background Video</li> <li class="btn btn-default" id="narrow">Fixed Width</li> <li class="btn btn-default" id="jumbo">Jumbotron</li> <li class="btn btn-default" id="slider">Slider</li> </ul> </div> </div> <!-- ********** PICK YOUR LAYOUT ********** --> <div class="container"> <header>Pick Your Layout:</header> <div class="layoutpick pick" data-pick="layoutpicker"> <ul> <li class="btn btn-default" id="magazine">Magazine</li> <li class="btn btn-default" id="prod2">2 product</li> <li class="btn btn-default" id="prod3">3 product</li> <li class="btn btn-default" id="prod4">4 product</li> </ul> </div> </div> </div> 

Answer 2

有很多方法可以解决这个问题。 但在你的情况下，使用$(".picker .pick")选择器将返回三个元素。 您需要将其过滤到单个元素。

例如，如果您只想定位第一个元素，则可以使用:eq选择器

$(".picker .pick:eq(0)").toggleClass('show');

或者通过遍历

$(".picker .pick").eq(0).toggleClass('show')

或者您可以使用find属性并搜索类pick

$('.picker .container header').click(function() {
    $(this).find('.pick').toggleClass('show');
}

或者使用filter功能

$('.picker .container header').click(function() {
    $(this).filter('.pick').toggleClass('show');
}

Answer 3

尝试这个：

$('.picker .container header').click(function() {
    var $this = $(this);
    var $pick = $('.pick', $this.parent());
    $pick.toggleClass('show');
    $this.toggleClass('minus');
});

Answer 4

$('.picker .container header').click(function() {
  $('.picker .pick').toggleClass('show');
  $('.picker .container header').toggleClass('minus');
});


$('.picker .container header').click(function() {
  $(this).toggleClass('minus'); //toggle only the header you have clicked on
  $(this).find('.pick').toggleClass('show'); // toggle only .picks inside the header you have clicked on
   //or $('.pick', $(this)).toggleClass('show');
});

通过在点击功能中不使用find，可以稍微好一些

Answer 5

你只需要使用$(this)来获取被点击的元素，并从第二个选择中not($(this))将其排除。

这是您需要的代码：

$('.picker .container header').click(function() {
      $(this).toggleClass('show');
      $('.picker .container header').not($(this)).toggleClass('minus');
});

 $('.picker .container header').click(function() { console.log($(this)); $(this).toggleClass('show'); $('.picker .container header').not($(this)).toggleClass('minus'); }); 

 .picker { display: inline-block; vertical-align: top; } .picker { width: 20%; margin-right: 10px; } .picker .container { width: 100%; } .picker .container header { color: #fff; background-color: #000; padding: 10px; transition: .4s ease-in; text-transform: uppercase; font-weight: bold; margin-bottom: 10px; cursor: pointer; } .picker .container header.minus:after, .picker .container header:after { font-family: fontawesome; margin-left: 10px; } .picker .container header:after { content: "\\f055"; } .picker .container header.minus:after { content: "\\f056"; } .picker .pick { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="picker"> <div class="container"> <h1 class="buildit">Build Your Own Site:</h1> </div> <!-- ********** PICK YOUR MENU ********** --> <div class="container"> <header>Pick Your Menu Style:</header> <div class="navpick pick" data-pick="navpicker"> <ul> <li class="btn btn-default" id="fixedtop">Fixed Top</li> <li class="btn btn-default" id="statictop">Static Top Navbar</li> <li class="btn btn-default" id="static">Static Navbar</li> </ul> </div> </div> <!-- ********** PICK YOUR HERO ********** --> <div class="container"> <header>Pick Your Hero Style:</header> <div class="heropick pick" data-pick="heropicker"> <ul> <li class="btn btn-default" id="bggifness">Background GIF</li> <li class="btn btn-default" id="bgvid">Background Video</li> <li class="btn btn-default" id="narrow">Fixed Width</li> <li class="btn btn-default" id="jumbo">Jumbotron</li> <li class="btn btn-default" id="slider">Slider</li> </ul> </div> </div> <!-- ********** PICK YOUR LAYOUT ********** --> <div class="container"> <header>Pick Your Layout:</header> <div class="layoutpick pick" data-pick="layoutpicker"> <ul> <li class="btn btn-default" id="magazine">Magazine</li> <li class="btn btn-default" id="prod2">2 product</li> <li class="btn btn-default" id="prod3">3 product</li> <li class="btn btn-default" id="prod4">4 product</li> </ul> </div> </div> </div>