抓取Span元素的一個位置

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>

或者你會在索引綁定作爲參數傳遞給單擊處理程序：

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>