将嵌套的锚标记添加到section元素后，在click事件上触发

Question

我想创建一种排序模式，当单击提供有关主题的其他信息的<li>时可以打开。 我创建了一个popUpTrigger，它响应用户的“单击”，然后收集提供的部分（以及嵌套在其中的所有标签），并将其移动到随后出现在页面上的popUp div中。 我已经采取了必要的预防措施，以防出现警报的声音空白。 但是，当某个部分不为空时（该警告包含文本并包含其他锚标记），警报仍会触发。 我不确定为什么会这样。

当我控制台日志时，我看到浏览器正在将嵌套的锚标记视为该部分的单独实体。 我试过将锚标记进一步嵌套在div元素中，然后重写javascript，以便将嵌套锚标记的html作为本节的一部分进行相应评估，但无济于事。 仅当HTML的section元素中包含其他锚标记时，才会发生这种反向触发。

的HTML

<li id="card">
   <a class="popUpTrigger" href="#">
      Get a Library Card

      <section class="hide">
          <h6> How to Obtain a Library Card:</h6>
          <p> Additional Info </p>
          <p> Additional Info </p>
          <p> Additional Info </p>
          <p> Additional Info </p>
          <a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
             <img src="imgs/LibraryCardVector.png" alt="library card">
          </a>
       </section>
    </a>
</li>

<div class="popUp">
  <div>
    <div id="popUpClose"> <button type="button" class="btn">X</button></div>    
  </div>
  <div id="moreInfo">
    <!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
  </div>
</div>

的JavaScript

$('a.popUpTrigger').on('click', function() {
    $(this).addClass('selected');
    if ($('.selected')) {
      let messageArea = $('.selected > section.hide');
      let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
      let fullMessage = messageArea.html();

      if (strippedMessage === "") {
        alert("Sorry that page isn't available right now.");
        $(this).removeClass('selected');
      } else {
        $('.popUp').css('display', 'block');
        $('.popUp #moreInfo').html(fullMessage);
      }
    }
    $('.popUp #popUpClose').on('click', function() {
      $('.popUpTrigger').removeClass('selected');
      $('.popUp').css('display', 'none');
    });
});

Answer 1

我从锚中删除了孩子，而是使用NEXT 。 另外，不需要if语句。 我在代码中保留了.select，以防万一您想在单击时设置锚样式。

 $('a.popUpTrigger').on('click', function() { $('a.popUpTrigger').removeClass("selected"); $(this).addClass('selected'); let messageArea = $(this).next("section"); let strippedMessage = messageArea.text().replace(/(\\r\\n|\\n|\\r)/gm, "").replace(/\\s/g, ""); let fullMessage = messageArea.html(); if (strippedMessage === "") { alert("Sorry that page isn't available right now."); $(this).removeClass('selected'); } else { $('.popUp').css('display', 'block'); $('.popUp #moreInfo').html(fullMessage); } $('.popUp #popUpClose').on('click', function() { $('.popUpTrigger').removeClass('selected'); $('.popUp').css('display', 'none'); }); }); 

 .selected{color:red;} .hide{display:none;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li id="card"> <a class="popUpTrigger" href="#"> Get a Library Card </a> <section class="hide"> <h6> How to Obtain a Library Card:</h6> <p> Additional Info </p> <p> Additional Info </p> <p> Additional Info </p> <p> Additional Info </p> <a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf"> <img src="imgs/LibraryCardVector.png" alt="library card"> </a> </section> </li> <div class="popUp"> <div> <div id="popUpClose"> <button type="button" class="btn">X</button></div> </div> <div id="moreInfo"> <!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE--> </div> </div> 

Answer 2

您有以下代码

<a href="#">
  <a href="#"></a>
</a>

在HTML中嵌套嵌套锚无效。 因此，浏览器在渲染时将其分解。 这就是为什么您看到它的行为很奇怪。

您将需要将弹出代码粘贴在元素之外。

<a class="popUpTrigger" href="#">
   Get a Library Card
</a>
<section class="hide">
  <p>Foo</p>
  <a href="#">Bar</a>
</section>

并用next（）引用它

$(".popUpTrigger").on("click", function (e) {
  e.preventDefault();
  var anchor = $(this);
  anchor.next('section').toggleClass("hide");
});