Question

我正在尝试创建一个评论框，在每个提交时动态创建一个新的。 <div>的内部元素是3个按钮编辑，发布，取消和关闭图标（图像）。这些也是动态创建的。我终于把它们全部追加了。下面的代码会在两个提交中生成类似下图的内容。我面临的错误是，无论点击<div>的关闭图标/按钮，始终是最后一个<div>受到影响。在这里，我试图关闭“嗨”。但是＆＃39;你好＆＃39;正在受到影响。甚至评论都有<div>的重复。请帮我纠正这些问题。

<!DOCTYPE html>
<html>
<head>
    <title>Comment</title>
</head>
<body>

<textarea id="ta" rows="30" cols="30" readonly></textarea>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>


<script type="text/javascript">


var newDiv="",i=1,ta="";
    function add() {
        i++;
        ta=document.getElementById('ta');
        newDiv = document.createElement("div");
        newDiv.id = "d"+i;
        newDiv.style.display="block";

        newTa = document.createElement("input");
        newTa.type="text"
        newTa.id = "t"+i;
        //newTa.readonly='true';
        newTa.setAttribute("readOnly","true");
        newTa.style.display="block";

        newTa.onclick=function(){

        newP.style.visibility="visible";
        newImg.style.visibility="visible";
        newBut1.style.visibility="visible";
        newButt1.style.visibility="visible";

        };

       // document.querySelector('body').addEventListener('click', function(event) {


        newP=document.createElement("BUTTON");
        newP.id="p"+i;
        newP.innerHTML="Edit";
        newP.style.visibility="hidden";
        newP.style.display="inline";
        newP.onclick=function()
        {



            newTa.removeAttribute('readonly'); // only needed the first time
            newTa.readOnly = false;

            //newTa.setAttribute("readOnly","false");
            //newTa.readonly='false';
            //newP.innerHTML="wrng";
        }

        newImg=document.createElement("IMG");
        newImg.id="i"+i;
        newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
        newImg.style.width="20%";
        newImg.style.height="20%";
        newImg.alt="close";
        newImg.style.visibility="hidden";
        newImg.style.display="inline";
        newImg.onclick=function()
        {
             newDiv.innerHTML="";
             //newDiv.remove();
        }

        newBut1=document.createElement("button");
        newBut1.id="b"+i;
        newBut1.innerHTML="Post";
        newBut1.style.visibility="hidden";
        newBut1.style.display="inline";
        newBut1.onclick=function(){
            //newTa.readonly='true';
            newTa.setAttribute("readOnly","true");
        }


        newButt1=document.createElement("button");
        newButt1.id="bt"+i;
        newButt1.innerHTML="Cancel";
        newButt1.style.visibility="hidden";

        newButt1.onclick=function(){
            newTa.value=document.getElementById('tb').value;
            newTa.readonly='true';
        }


        newDiv.appendChild(newTa);
        newDiv.appendChild(newP);
        newDiv.appendChild(newImg);
        newDiv.appendChild(newBut1);
        newDiv.appendChild(newButt1);


        var b=""
        b="t"+i;
        ta.appendChild(newDiv);
        document.getElementById(b).value=document.getElementById('tb').value;

    }


    </script>

</body>
</html>

Answer 1

试试这段代码。我已将textarea更改为div。初始i为0而不是1.您也可以将其设置为1.它不会影响功能。有些变量是全局变量，我现在将它们更改为局部变量，如newDiv，newP，newImg等。

int x = 5, y = 10;
int * p = &x;
//do something with p
p = &y; //this is fine, just a re-assignment.

Answer 2

为什么不使用jquery来最小化代码广告系列。以下是解决问题的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Comment</title>
</head>
<body>

<br>
<div class="container">
<input type="textbox" id="tb"><br>

<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br />
</div>

<button class="submit">Submit</button><br>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script type="text/javascript">


$(document).ready(function() {

    $('.submit').click(function() {
        var element = '<div class="container">'+'<input type="textbox" id="tb"><br>'+
'<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br /></div>';
        $('.submit').before(element);
    });
    $('body').delegate('.cancel', 'click', function() {
        $(this).parent().remove();
    });
});

    </script>

</body>
</html>

由于

在每次单击按钮时动态创建的<div>内的元素未被正确覆盖

2 个答案: