时间戳

首页 > 解决方案 > 在将嵌套锚标记添加到部分元素后单击事件适得其反

javascript - 在将嵌套锚标记添加到部分元素后单击事件适得其反

问题描述

我想创建一种模式，以便在<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');
    });
});

标签： javascripthtml

解决方案

I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.

$('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>

推荐阅读