Блог

Я хотел создать своего рода модал, который открывался бы при нажатии на <li> , предлагающий дополнительную информацию о теме. Я создал popupTrigger, который реагирует на пользовательский «щелчок», а затем собирает предоставленный раздел (и все теги, вложенные внутри) и перемещает его во всплывающий div, который затем появляется на странице. Я принял необходимые меры предосторожности на случай, если раздел пуст, в котором будет звучать предупреждение. Однако предупреждение по-прежнему срабатывает, когда раздел не пуст (он содержит текст и дополнительный тег привязки). Я не уверен, почему это происходит.

Когда я регистрирую консоль, я вижу, что вложенный тег привязки просматривается браузером как отдельный объект для раздела. Я попытался дополнительно вложить тег привязки в элемент div и переписать javascript, чтобы html вложенного тега привязки был соответствующим образом оценен как часть раздела, но все безрезультатно. Этот обратный эффект возникает только тогда, когда дополнительный тег привязки включен в элемент section HTML.

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(/(rn|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');
    });
});
  

Я удалил дочерние элементы из вашего привязки и вместо этого использовал NEXT . Также не понадобился ваш оператор if. Я оставил .выбранный в коде на всякий случай, если вы хотите изменить стиль привязки при нажатии.

 $('a.popUpTrigger').on('click', function() {
    $('a.popUpTrigger').removeClass("selected");
    $(this).addClass('selected');
    
      let messageArea = $(this).next("section");
      let strippedMessage = messageArea.text().replace(/(rn|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>  

У вас есть следующий код

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