0

我试图仅切换特定段落，但不能同时切换两者。.popuplink 对于 html 代码中的 ul 来说是同一个类。ID 是动态生成的，它从 0 开始（最后）。示例：如果我单击 idpromo_popup_cta_0则promo_popup_wrapper_0应该切换。

当这个 idpromo_popup_cta_0结尾为 0 时，这个 id 结尾promo_popup_wrapper_0为 0。如果有 100 个不同数字的 div，下面将不起作用。我不想为单独的点击编写单独的代码。

$("#promo_popup_cta_0").on("click", function() {
  $("#promo_popup_wrapper_0").slideToggle();
});

$(".popupLink").on("click", function() {
  $(".popupContentWrapper").slideToggle();
});

$(".popupCloseBtn").on("click", function() {
  $(".popupContentWrapper").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header-top-info">

  <div class="promo-row">
    <p>
      FREE SHIPPING ON U.S. ORDERS OF $100 + 
      <u class="popupLink" id="promo_popup_cta_0">Details</u>
    </p>
    <p></p>
    <div class="popupContentWrapper" id="promo_popup_wrapper_0">
      <div class="text-right">
        <div class="popupCloseBtn">Close X</div>
      </div>
      <div class="popupContent">
        <p>Nothing says thank you, and I love you, quite like snacks, especially when they come packaged in a FEED 10 Bag. Curated with our friends at Mouth, this bundle features a delightful mix of salty and sweet</p>
      </div>
    </div>
  </div>


  <div class="promo-row">
    <p>
      Navy blue bag day <u class="popupLink" id="promo_popup_cta_1">For More</u>
    </p>
    <p></p>
    <div class="popupContentWrapper" id="promo_popup_wrapper_1">
      <div class="text-right">
        <div class="popupCloseBtn">Close X</div>
      </div>
      <div class="popupContent">

        <p style="margin: 0px 0px 15px; padding: 0px; text-align: justify;"><strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
          of type and scrambled it to make a type&nbsp;</p>

      </div>
    </div>
  </div>
</div>

4

2 回答 2

2

您需要使用this来引用被单击的元素，否则（如您所见）您将引用所有匹配的元素。用于.closest()向上遍历 DOM，并在需要时.find()向下遍历：

$(".popupLink").on("click", function() {
  $(this).closest('.promo-row').find(".popupContentWrapper").slideToggle();
});

$(".popupCloseBtn").on("click", function() {
   $(this).closest(".popupContentWrapper").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header-top-info">

  <div class="promo-row">
    <p>
      FREE SHIPPING ON U.S. ORDERS OF $100 +
      <u class="popupLink" id="promo_popup_cta_0">Details</u>
    </p>
    <p></p>
    <div class="popupContentWrapper" id="promo_popup_wrapper_0">
      <div class="text-right">
        <div class="popupCloseBtn">Close X</div>
      </div>
      <div class="popupContent">
        <p>Nothing says thank you, and I love you, quite like snacks, especially when they come packaged in a FEED 10 Bag. Curated with our friends at Mouth, this bundle features a delightful mix of salty and sweet</p>
      </div>
    </div>
  </div>


  <div class="promo-row">
    <p>
      Navy blue bag day <u class="popupLink" id="promo_popup_cta_1">For More</u>
    </p>
    <p></p>
    <div class="popupContentWrapper" id="promo_popup_wrapper_1">
      <div class="text-right">
        <div class="popupCloseBtn">Close X</div>
      </div>
      <div class="popupContent">

        <p style="margin: 0px 0px 15px; padding: 0px; text-align: justify;"><strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
          of type and scrambled it to make a type&nbsp;</p>

      </div>
    </div>
  </div>
</div>

于 2018-10-19T15:12:42.773 回答
0

如果你保持一致并且除了最后的数字之外ID都相同，你可以取最后一个数字_并像这样使用它

$(".popupLink").on("click", function(e) {
    var id = e.target.id;
    var n = id.lastIndexOf('_');
    var result = id.substring(n + 1);
    $("#promo_popup_wrapper_" + result).slideToggle();
});

希望这可以帮助

于 2018-10-19T15:18:23.203 回答