Question

目前我正在使用以下代码，点击HTML div元素，将内部文本更改为“Hello World”：

<div id = "one" onclick = "click('one')" >text</div>

<script>
    function click(id){
        document.getElementById(id).innerHTML = "Hello World";
    }
</script>

这可以按预期工作，并将div的内容更改为“Hello World”。

我面临的问题是我正在使用id作为函数的参数输入，这也意味着对于我创建的每个div元素，我必须在{{1}中手动编写其id功能。

我可以使用以下脚本创建div元素，该脚本从HTML输入框中获取值，变成一个数字，然后在for循环中使用该数字来创建指定的div元素：

onclick

现在我遇到的问题是将click（）函数应用于刚刚创建的任何新div元素，以便click（）函数仅影响我单击的div。我在创建新的div元素时包含了setAttribute行，因此将它链接到click（）函数没有问题。

我相信有两种选择：

- 在numberOfDivs（）函数中创建新代码，并使用var i为我创建的每个新div元素创建一个不同的id，因为每次for循环重复时var i都会增加到不同的值

或

- 重写click（）函数，这样我就可以使函数适用于所有div，而不必使用id参数。我粗略地想在该代码中使用'this'关键字，或沿着这些行的任何东西，以便它只适用于我点击的div元素。

对于这两种可能的解决方案，我不太确定如何执行它们，所以如果有人能够举例说明它是如何工作的话会有很大的帮助。

任何问题或说明都可以随意提出。

Answer 1

innerHTML和onClick中的拼写错误文本

<script>
    function click(id){
        document.getElementById(id).innerHTML = "Hello World";
    }
</script>

和

<div id = "one" onClick ="click('one')" >text</div>

Answer 2

我面临的问题是我必须使用id作为函数的参数输入......

不，你没有;您可以将this传递给您的函数，该函数是对点击发生的div的引用：

<div id = "one" onclick = click(this) >text</div>

然后在您的函数中，使用该参数而不是document.getElementById(id)：

function click(div){
    div.innerHTML = "Hello World";
}

现在你可以为多个div使用相同的功能。

但请注意，如果您以编程方式创建div，则比设置onclick属性更好的答案：addEventListener（旧版IE上的attachEvent）。在你的函数创建div：

var newDiv = document.createElement("div");
var divText = document.createTextNode("text")
if (newDiv.addEventListener) {
    newDiv.addEventListener("click", click, false);
}
else {
    newDiv.attachEvent("onclick", click);
}

在click内，使用this：

function click(){
    this.innerHTML = "Hello World";
}

Answer 3

这个想法有用吗？创建你的div（例如id='one'）：

<div class='mydivs' id='one' ></div>

然后，使用 JQuery 的类和一个事件处理程序检测div上的点击：

$(".mydivs").click( function() {
   id = $(this).attr('id');
   click(id);
});

Answer 4

<div id="one">
<!-- dynamically added child nodes -->
</div>

<script>
$.ready(function(){
$('#one').children().livequery('click', function(event){
         this.innerHTML = "Hello world";
    });
});
<script>

在这里，我们可以使用livequery将点击处理程序添加到将动态添加的子元素中。

Answer 5

如果您为新创建的div提供公共类，例如你可以点击这个

$function(){
   //Any click event of the body element that originates from a ".clickable" 
   //will be handled by the provided handler
   $("body").on("click",".clickable",function(){
     $(this).html("Hello world");
   });
   //... anything else that has to happen on document ready
});

如何应用单击函数，将单击的div更改为创建的新div元素

5 个答案: