单击时输出特定范围的值

时间:2015-05-29 03:51:37

标签: javascript html

我尝试构建一个脚本来检测用户点击的特定<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。 谢谢!

4 个答案:

答案 0 :(得分:2)

使用event delegation

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

答案 1 :(得分:1)

包装

问题是,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;

答案 2 :(得分:0)

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);
}

答案 3 :(得分:0)

您可以将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);
    }
}