Question

我有一个ul，当点击每个li时，嵌套范围中的文本会被发送到输入。我被建议用ul上的eventlistener替换列表中每个li上的（多个）onclicks-一个。可以使用有关如何巧妙地使用相同功能的建议。

HTML：

<ul>
<li  onclick="myfunction(this)"><img src="img1"><span>Some text</span></li>
<li  onclick="myfunction(this)"><img src="img2"><span>Some other text</span></li>          
</ul>
<input id="field_jd6brw">

使用Javascript：

function myfunction(li){
document.getElementById("field_jd6brw").value = li.childNodes[1].textContent;
}

Answer 1

只需使用jquery：

$("ul li").click(function (){

    $("#field_jd6brw").val($(this).text());
});

Answer 2

如果你需要坚持普通的JavaScript，你可以使用这样的东西：

function myfunction(){
    document.getElementById("field_jd6brw").value = this.children[1].innerHTML;
}    

var aLi = document.querySelectorAll('ul li');

for (var i=0, len = aLi.length; i<len; i++) {
    aLi[i].addEventListener('click', myfunction, false);
}

演示：http://jsfiddle.net/Q6Tm5/

此代码选择UL中的所有LI（如果需要，使用更具体的选择器，如UL的ID），然后循环通过每个LI元素添加事件监听器。

请注意，此代码在IE的旧版本中不起作用 - 您需要添加特定于IE的代码或切换到jQuery

使用eventlistener而不是onclick

2 个答案: