Question

所以我建立了一个网站，我用javascript创建元素，并将内容存储在我从数据库中获取的数组中，这是我能够成功完成的。但是，当用户点击div中我想要不显示的按钮时，我想不显示包含通过javascript添加的所有其他元素的div父级。但是，我注意到两个问题，我想弄清楚它为什么会起作用。首先，当我单击按钮，并将display none应用于其父级时，它始终在最后创建的div上应用display none，而不是在单击它的元素的相应div父级。此外，即使显示无应用于最后一个div（虽然我说，我希望它将display none应用于单击按钮的父级），但最后一个div仍显示在页面上，尽管它已经显示在页面上显示无。

我需要帮助解决这两个问题。任何帮助将不胜感激。谢谢。顺便说一句，请不要标记重复，因为我确实查找了类似的问题，但没有一个解决方案适用于我遇到的问题。

以下是javascript代码：

var j = 0;
for (var i = 0; i < array.length; i++) {

    var mydiv = document.createElement('div');
    var element = document.createElement('p');
    var element2 = document.createElement('p');
    var raiseRating = document.createElement('button');
    var lowerRating = document.createElement('button');
    var rating = document.createElement('h1');
    var flag = document.createElement('button');

    // Index is set to hold the id so it can be used to identify the quotations whose button was clicked
    index[i] = array[i][j+3];


    //raiseRating.id = "raiseRating";
    raiseRating.innerHTML = "+";
   // lowerRating.id = "lowerRating";
    lowerRating.innerHTML = "-";
    flag.innerHTML = "flag"

    rating.innerHTML = array[i][j+2];

    element.innerHTML = '\"' + array[i][j] + '\"';
    element2.innerHTML = '\--' + array[i][j+1];
    mydiv.appendChild(element);
    mydiv.appendChild(element2);
    mydiv.appendChild(raiseRating);
    mydiv.appendChild(rating);
    mydiv.appendChild(lowerRating);
    mydiv.appendChild(flag);

   if (document.body.appendChild(mydiv)) {
       flag.addEventListener("click", function(){
           console.log("this should print");           
           mydiv.style.display = "none";
           //console.log(mydiv);
       });
   }   

}

更新：这是html，因为有人要求它

<!doctype html>
<html lang="en">

<head>
<title>Quotation Service</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Cookie" 
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" 
rel="stylesheet">
</head>

<body>
<div class="top-bar">
    <h1>Quotes</h1>
    <a href="register.php" >Register</a>
    <a href="login.php">Login</a>
    <a href="addQuotes.php">Add Quote</a>

</div>
</body>

</html>

Answer 1

我不知道var数组是什么，所以我刚刚删除。这应该指向正确的方向。问题是你的关闭。我评论过你可以注意到。了解他们！

var j = 0;
            for (var i = 0; i < 10; i++) {
								
                var mydiv = document.createElement('div');
                var element = document.createElement('p');
                var element2 = document.createElement('p');
                var raiseRating = document.createElement('button');
                var lowerRating = document.createElement('button');
                var rating = document.createElement('h1');
                var flag = document.createElement('button');

                // Index is set to hold the id so it can be used to identify the quotations whose button was clicked
              


                //raiseRating.id = "raiseRating";
                raiseRating.innerHTML = "+";
               // lowerRating.id = "lowerRating";
                lowerRating.innerHTML = "-";
                flag.innerHTML = "flag"

          
                mydiv.appendChild(element);
                mydiv.appendChild(element2);
                mydiv.appendChild(raiseRating);
                mydiv.appendChild(rating);
                mydiv.appendChild(lowerRating);
                mydiv.appendChild(flag);
								
                /** CLOSURE STARTS **/
                (function(flag, node){
                
                
               if (document.body.appendChild(node)) {
                   flag.addEventListener("click", function(){
                       console.log("this should print");           
                       node.style.display = "none";
                       
                   });
               }   
							}(flag, mydiv));
              /**CLOSURE ENDS **/
            }

Javascript element.display =＆＃34; none＆＃34;仍然显示div

1 个答案: