Question

我知道这个问题已经修复了很多时间，但我没有找到答案。

我正在显示这样的DIV：

<div class="product-infos-pm">
  <form action="/panier.html" method="post">
    <table>
      <tr>
        <td align="right">
          <input type="hidden" value="160" name="qteColis" class=" ">
          <input type="hidden" value="2.4" name="prixColis" class=" ">
          <input type="hidden" value="2.9" name="prixUni" class=" ">
        </td>
      </tr>
    </table>
    <span class="product-infos-tarif">Click here
      <span class="plus-ou-moins">
        <img class="toggle-tarif" src="arrow_small_down.png" alt="minus">
      </span>
    </span>
    <div style="display: none" class="detail-prix">
      <table class="info-prix">
        <tr>
          <td><span class="nbColis"></span></td>
          <td><span class="qteColis"></span></td>
          <td><span class="prixColis"></span> €</td>
          <td><span class="prixTotColis"></span> €</td>
        </tr>
    </div>
  </form>
</div>

<div class="product-infos-pm">
  <form action="/panier.html" method="post">
    <table>
      <tr>
        <td align="right">
          <input type="hidden" value="60" name="qteColis" class=" ">
          <input type="hidden" value="3.2" name="prixColis" class=" ">
          <input type="hidden" value="4.7" name="prixUni" class=" ">
        </td>
      </tr>
    </table>
    <span class="product-infos-tarif">Click here
      <span class="plus-ou-moins">
        <img class="toggle-tarif" src="arrow_small_down.png" alt="minus">
      </span>
    </span>
    <div style="display: none" class="detail-prix">
      <table class="info-prix">
        <tr>
          <td><span class="nbColis"></span></td>
          <td><span class="qteColis"></span></td>
          <td><span class="prixColis"></span> €</td>
          <td><span class="prixTotColis"></span> €</td>
        </tr>
    </div>
  </form>
</div>

我有这个事件：

    $('.plus-ou-moins').click(function() {
      $('.detail-prix').slideToggle('slow', function(){
        var img = $('.toggle-tarif');
        var etat = img.attr('alt');
      });

    });

当我点击.toggle-tarif img时，所有.detail-prix DIV都在滑动。

如何只滑动好的div？

Answer 1

使用parent().next()覆盖该div：

而不是：

$('.detail-prix')

使用：

$(this).parent('span').next('.detail-prix')

以下是您的代码应该如何：

$('.plus-ou-moins').click(function() {
  $(this).parent('span').next('.detail-prix').slideToggle('slow', function(){
    var img = $('.toggle-tarif');
    var etat = img.attr('alt');
  });
});

Answer 2

您想将代码更改为：

 $('.plus-ou-moins').click(function() {
      $(this).parent(".product-infos-pm").find(".detail-prix").slideToggle('slow', function(){
        var img = $('.toggle-tarif');
        var etat = img.attr('alt');
      });

    });

如何选择下一个div？

2 个答案: