Question

我正在尝试生成一系列我想要打印给用户的元素。每个span元素都有一个附加功能的单击，当单击时，将突出显示程序的不同部分。所以我想做的是（在生成元素之后）让我们说这就是我们所拥有的

<div id = "sequence label">
    <span>K</span>
    <span>L</span>
    <span>A</span>
    <span>S</span>
    <span>G</span>
</div>

我想在点击时以某种方式抓取跨度的索引并将其与列表中的另一个索引相对应，这样就说：

data = [2, 3, 4, 5, 6]

所以抓住第一个元素[0]会给我数据[2]。

Answer 1

您可以使用jQuery的.index()函数

var data = [2, 3, 4, 5, 6];
$("span").click(function() {
  var index = $(this).index();
  console.log(data[index]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <span>K</span>
    <span>L</span>
    <span>A</span>
    <span>S</span>
    <span>G</span>
</div>

Answer 2

没有jQuery，解决方案就是：

var spans = document.querySelectorAll('span');

for (var i = 0; i < spans.length; i++) { 
    spans[i].addEventListener('click', function() {
        for (var el = this, index = 1; el = el.previousSibling; index += el.tagName === 'SPAN');
        console.log('You clicked span number ' + index);
    });
}

<div id = "sequence label">
    <span>K</span>
    <span>L</span>
    <span>A</span>
    <span>S</span>
    <span>G</span>
</div>

或者您将索引绑定为click处理程序的参数：

var spans = document.querySelectorAll('span');

for (var i = 0; i < spans.length; i++) { 
    spans[i].addEventListener('click', function(index) {
        console.log('You clicked span number ' + index);
    }.bind(spans[i], i+1));
}

<div id = "sequence label">
    <span>K</span>
    <span>L</span>
    <span>A</span>
    <span>S</span>
    <span>G</span>
</div>

抓住Span元素的位置

2 个答案: