单击时输出特定范围的值

Question

我尝试构建一个脚本来检测用户点击的特定<span>并输出该点击量程内容的值。

我的HTML看起来像这样：

<div id="span-container">
    <span>Lorem</span>
    <span>Ipsum</span>
    <span>Something...</span>
    <span>Something...</span>
    <span>Amet</span>
</div>

我的Javascript看起来像这样：

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
        alert(spans[i].innerHTML);
    }
}

尝试运行此代码会导致Cannot read property 'innerHTML' of undefined错误。

我确定为每个范围提供与<span id="lorem">Lorem</span>之类的内容相关的ID，但我乐观地认为存在更优雅的解决方案。

如果可能的话，我也想避免使用jQuery。 谢谢！

Answer 1

使用event delegation：

var div = document.getElementById('span-container');
div.addEventListener('click', function(e) {
    var target = e.target;
    if(target.nodeName == 'SPAN') {
        alert(target.innerHTML);
    }
});

Answer 2

包装

问题是，i在用户点击它时发生了变化。使用自执行函数或eventListener

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
    (function (j) {
        spans[j].onclick = function() {
            alert(spans[j].innerHTML);
        }
    }(i));
}

＆＃13;

＆＃13;

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
    (function (j) { // Receives as j
        spans[j].onclick = function() {
            alert(spans[j].innerHTML);
        }
    }(i)); // Passes in i
}

＆＃13;

<div id="span-container">
    <span>Lorem</span>
    <span>Ipsum</span>
    <span>Something...</span>
    <span>Something...</span>
    <span>Amet</span>
</div>

＆＃13;

＆＃13;

＆＃13;

<小时/>

使用this

this将引用单击的元素，这可能是执行此操作的最佳方式：

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
        alert(this.innerHTML);
    }
}

＆＃13;

＆＃13;

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
        alert(this.innerHTML);
    }
}

＆＃13;

<div id="span-container">
    <span>Lorem</span>
    <span>Ipsum</span>
    <span>Something...</span>
    <span>Something...</span>
    <span>Amet</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

The problem here is the wrong use of a closure variable in a loop

但我认为在这种情况下你可以使用addEventListener

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

function spanClickHandler() {
  alert(this.innerHTML);
}

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

<div id="span-container"> <span>Lorem</span>
  <span>Ipsum</span>
  <span>Something...</span>
  <span>Something...</span>
  <span>Amet</span>

</div>

或仅使用this.innerHTML作为this在事件处理程序内引用span元素

spans[i].onclick = function () {
    alert(this.innerHTML);
}

• JavaScript closure inside loops – simple practical example

Answer 4

您可以将this用于当前元素。

试试这段代码：

div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");

for(var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
        alert(this.innerHTML);
    }
}