Question

我对javascript有点新鲜。现在我正在开发一个项目，允许用户在我的网站上添加和删除公园。为此，我想有一个弹出窗口，允许他们输入状态和公园名称来添加或删除。我想添加2个模态，一个用于添加，一个用于删除。但是，因为我在2个单独的js文件中执行它，所以只调用remove，并且正在为它们调用它。

以下是我的一些HTML

<body id="page-dash" class="container">
    <div class="one">
        <ul class="vertical">
            <li id="addBtn" class="vertical"><a href="#">Add a Park</a><br></li>
            <li id="remBtn" class="vertical"><a href="#">Remove a Park</a><br></li>
            <li id="updateBtn" class="vertical"><a href="#">Update List</a><br></li>
            <li id="passBtn" class="vertical"><a href="#">Reset Password</a><br></li>
        </ul>
    </div>

    <div id="stateParkList" class="two">
        <p id="desc">List of states and their National Parks.</p>
    </div>

    <!-- Pop Up Window -->
    <div id="addWindow">
    <div id="popUp-add" class="popUp">
        <div class="popUp-content">
            <span class="close">&times;</span>
            <form id="Form">
                <p>Add Park</p><br>
                <p>State:</p>
                <input type="text" id="state"><br>
                <p>National Park:</p>
                <input type="text" id="park"><br>
                <button onclick="addPark()">Submit</button>
            </form>
        </div>

    </div>

    <div id="remWindow">
    <div id="popUp-rem" class="popUp">
        <div class="popUp-content">
            <span class="close">&times;</span>
            <form id="Form">
                <p>Remove Park</p><br>
                <p>State:</p>
                <input type="text" id="state"><br>
                <p>National Park:</p>
                <input type="text" id="park"><br>
                <button onclick="remPark()">Submit</button>
            </form>
        </div>

    </div>

    <footer>&copy; Copyright CS234-SIUe-Spring 17. All rights reserved.</footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="../js/parks.js"></script>
    <script src="../js/add.js"></script>
    <script src="../js/remove.js"></script>

这是add.js：

var modal = document.getElementById('popUp-add');

var btn = document.getElementById("addBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

remove.js：

var modal = document.getElementById('popUp-rem');

var btn = document.getElementById("remBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

和CSS：

/*Pop up window in dashboard*/
.popUp {
    display: none; 
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
}

.popUp-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 15%;
    height: 23%;
    font-size: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-top: -7%;
    margin-right: -5%;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

form#Form input{
    border: 1pt solid black;
}
form#Form input{
    margin-bottom: 5%;
}

Answer 1

您的代码有两个问题。

您可以在全局（窗口）范围内定义所有可变数据，并导致意外更改。在add.js中，modal，btn和span定义了remove.js，remove.js和remove.js完全相同。因为您稍后加载var modal = document.getElementById('popUp-rem'); var btn = document.getElementById("remBtn"); var span = document.getElementsByClassName("close")[0];，三个可变数据的实际值是onclick
中的后一个赋值
```
window
```
您可以使用function scope和IIFE来避免全局命名空间污染
当您需要将多个事件添加到同一个dom元素时，您应该使用addEventListener而不是span，在这种情况下是onclick和onclick。因为remove.js之后的绑定事件会在更新的赋值后被覆盖。因此(function() { var modal = document.getElementById('popUp-add'); var btn = document.getElementById("addBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.addEventListener('click',function() { modal.style.display = "none"; }) window.addEventListener('click',function(event) { if (event.target == modal) { modal.style.display = "none"; } }) })()只响应最新的函数，在这种情况下只调用(function() { var modal = document.getElementById('popUp-rem'); var btn = document.getElementById("remBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.addEventListener('click',function() { modal.style.display = "none"; }) window.addEventListener('click',function(event) { if (event.target == modal) { modal.style.display = "none"; } }) })()中的函数。
< / LI>
您应该像这样更改代码

add.js
```
$postsDataTable = Datatables::of($posts);

$actionButton = '';    
if(\Entrust::can('pengguna-view')){  
   $actionButton = '<button name="button-drop" class="lihat-data btn-sm btn btn-default "
       data-id="'.$datas->id.'"
       data-username="'.$datas->username.'"
       data-attribute="'.$datas->attribute.'"
       data-op="'.$datas->op.'"
       data-value="'.$datas->value.'"
       data-barcode="'.$datas->barcode.'"
       data-flag="'.$datas->flag.'"
       data-dismiss="modal">
       <span class="glyphicon glyphicon-eye-open" aria-hidden="true"> Lihat</span>
     </button>';
}

   $postsDataTable = $postsDataTable->addColumn('action',function($datas) use ($actionButton) {
      return $actionButton;
  });
}

return $postsDataTable->make(true);
```
remove.js
```
.entry-image-link img
```
还有一件事，如果您的网站需要兼容IE，请考虑改用attachEvent。

2个相似的模态

1 个答案: