Question

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

当此ID promo_popup_cta_0的末尾为0时，则此promo_popup_wrapper_0的ID末尾为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>

Answer 1

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

$(".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>

Answer 2

如果您保持一致，并且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();
});

希望这会有所帮助

只需要切换特定段落

2 个答案: