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");
});

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

2 个答案: