时间戳

首页 > 解决方案 > 在javascript Modal Pop-up中制作span id替换li类

javascript - 在javascript Modal Pop-up中制作span id替换li类

问题描述

我有一个投资组合网页，然后单击一个项目，会弹出一个模式，里面有一个轮播画廊。

在我的.html页面中，项目是这样分类的

<li class="Project" data-modal="myModal_1">

在模态弹出窗口时，javascript 引用回“项目”类。我知道希望更改此设置，以便在单击 ID“PopUp”时不会激活模式弹出窗口。当我尝试在 Javascript 中更改它时，它不再起作用。而且我现在不知道如何解决它。我想说，我曾尝试更改 id、span 和 classes，但都没有成功。

window.onload = function () {

  span = document.querySelectorAll("#PopUp");

  document.querySelectorAll("#PopUp").forEach(LIelm=>{
    LIelm.addEventListener('click', showHideModal)
  })
};

function showHideModal(e) {

  if (!e.target.parentNode.matches('#PopUp , .modal-content' )) return
  e.preventDefault();

  let currentParent = e.target.parentNode;

  if (currentParent.matches('#PopUp') ){
    document.getElementById( currentParent.dataset.modal ).style.display = "block";
  }
  else {
    currentParent.parentNode.style.display = "";
  }
}
        <li class="Project" data-modal="myModal_1">

                    <span id="myBtn_1">
                        Irma Type
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                           Typedesign
                           <br>
                            <span id="PopUp">
                              Images
                            </id>
                        </p>

                        
                    </div>

                
                    <div id="myModal_1" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                              <img src="Images/Lirma/type.jpg" alt="img" width="100%">
                            </div>


                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal...</p>
                   </div>
                </div>
            </div>
        </li>

标签： javascripthtmlbootstrap-4

解决方案

您的 javascript 可能正在针对尚未创建的 dom 元素运行。

我会为此建议jquery。1.在你的html页面的header中加载jquery js。2.在您的html页面底部输入以下内容。

<script>
    $( document ).ready(function) {
      //stick you dom manipulation here.
    })
</script>

Jquery 健壮且与浏览器无关（旧版本的浏览器除外）。如果不能用 jquery 完成，它可能根本无法完成。

推荐阅读