Question

class="up"基本上只是一个向上的箭头。

HTML：

 <div class="change_div"> <!-- change password -->
   <div class="change_title">Change Password<i class="up"></i></div>
   <div class="change_content" display="none">
     <div class="change_subtitle">Enter Password</div>
     <input id="pw_old" class="change_input" type="password"></input>
     <div class="change_subtitle">Enter new Password</div>
     <input id="pw_new1" class="change_input" type="password"></input>
     <div class="change_subtitle">Confirm new Password</div>
     <input id="pw_new2" class="change_input" type="password"></input>
     <div class="button_confirm" onclick="checkInput()"></div>
   </div>
 </div>

jQuery的：

 $(document).ready(function(){
   $('div.change_title i').click(function() {
     if($(this).hasClass('up')) {
       $(this).removeClass('up');
       $(this).addClass('down');
       $('.change_content').show(); //help is needed here
     } else if($(this).hasClass('down')) {
       $(this).removeClass('down');
       $(this).addClass('up');
       $('.change_content').hide(); //and here
     }
   })
 });

我有3个div与类"change_content"和3个箭头（每个div 1个）。如果我点击第一个箭头，我不希望所有3个div显示/隐藏，而只是第一个。如果我点击第二个箭头，我只想要显示/隐藏第二个div ..

如何使用选择器执行此操作？

Answer 1

您可以使用最近和下一个

找到该元素

$(this).closest('.change_title').next('.change_content').show();

所以

$('div.change_title i').on('click', function() {
    $(this).toggleClass('up down')
           .closest('.change_title')
           .next('.change_content')
           .toggle()
});

Answer 2

更改

$('.change_content').show()

到

$(this).parent().next('.change_content').show()

和

$('.change_content').hide()

到

$(this).parent().next('.change_content').hide()

找到特定类型的“最近”元素

2 个答案: