jquery 用相同的 class 一一切换 div

Question

我想在点击link时一个一个切换showhidediv。我已经尝试 find() next() 来定位 div。但无法达到预期的效果。帮助我实现这一目标。

如需更多说明，请留下您的评论。

$(document).ready(function() {
  $('.showhide').hide();
  $('.divider a').click(function(e) {
    e.preventDefault();
    //$(".showhide").slideToggle();
    $(this).parent().next().find(".showhide").slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">
    <div class="divider">
        <a href="#">Link 1</a>
    </div>
     <div class="divider">
        <a href="#">Link 2</a>
    </div>
    <div class="divider">
        <a href="#">Link 3</a>
    </div>
</div>
<div class="link-content">
    <div class="divider-desc">
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>

Answer 1

Try below code:

$(document).ready(function() {
    $('.showhide').hide();
    $('.divider a').click(function(e) {
      e.preventDefault();
      //$(".showhide").slideToggle();
      $(this).parent().parent().next().find(".showhide").slideToggle();
      console.log($(this).parent().parent().next().find(".showhide"))
    });
  });

Answer 2

您需要 select 按索引。用.eq()到select一个接一个。

$(document).ready(function() {
      $('.showhide').hide();
      $('.divider').click(function(e) {  // note the change here
        e.preventDefault();
        $(".showhide").eq($(this).index()).slideToggle(); // and selector here with .eq
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">
    <div class="divider">
        <a href="#">Link 1</a>
    </div>
     <div class="divider">
        <a href="#">Link 2</a>
    </div>
    <div class="divider">
        <a href="#">Link 3</a>
    </div>
</div>
<div class="link-content">
    <div class="divider-desc">
        <div class="showhide">
           1  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
           2  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
           3  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>

Answer 3

您可以立即从 each 循环中获取被点击元素的索引：

$('.divider a').each(function(index){
  $(this).on('click', function(e){
    $('.showhide').eq( index ).toggle();
    $(this).toggleClass('active'); // just to indicate the opened links
    e.preventDefault();
  });
});

.showhide { display: none; margin: 5px; }
a.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divider"><a href="" target="_blank">Link 1</a></div>
<div class="divider"><a href="#">Link 2</a></div>
<div class="divider"><a href="#">Link 3</a></div>

<div class="showhide">1111</div>
<div class="showhide">2222</div>
<div class="showhide">3333</div>

jquery 用相同的 class 一一切换 div

jquery toggle div one by one with the same class

html

javascript

jquery

toggle