如何調用對應於相同數組ID的數組數據

Question

我有一個數組，其中每個元素引用另一個js文件中的一串svgs。我試圖獲取它，以便我的警報消息使用我在數組變量中使用的相同字符串。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode']; 

var bmAnim = document.getElementById('illus-'+illustArr[i]);  

bmAnim.addEventListener('click', function(){ 
    alert('illus-'+illustArr[i]); 
}); 

任何想法如何實現這一點？

Answer 1

您可以使用for-loop做到這一點。還要確保你檢查元素是否存在，這樣你就不會出錯。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode']; 
 

 
for (var i = 0; i < illustArr.length; i++) { 
 
    bmAnim = document.getElementById('illus-' + illustArr[i]); 
 
    
 
    if (bmAnim) { //check if element exists 
 
    bmAnim.addEventListener('click', function() { 
 
    alert('illus' + this.id); 
 
    }); 
 
    } 
 
}

<div id="illus-map">MAP</div> 
 
<p> 
 
    <div id="illus-privacy">PRIVACY</div> 
 
    <p> 
 
    <div id="illus-payment">PAYMENT</div> 
 
    <p> 
 
     <div id="illus-rewards">REWARDS</div> 
 
     <p> 
 
     <div id="illus-passcode">PASSCODE</div>

Answer 2

您需要遍歷數組，並在作用域中指定帶有相應鍵的click函數。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode']; 

illustArr.forEach(function (key) { 
    var bmAnim = document.getElementById('illus-' + key); 

    bmAnim && bmAnim.addEventListener('click', function() { 
    alert('illus-' + key); 
    }); 
}); 

Answer 3

您應該使用Array#forEach功能遍歷數組中的元素，你附加任何聽衆的click事件之前。另外，您可以在事件處理函數中使用this.id，以便使用所需的後綴引用字符串illus-*，而不是再次訪問illustArr。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'passcode']; 
 

 
illustArr.forEach(function (e) { 
 
    document.getElementById('illus-' + e).addEventListener('click', handler) 
 
}) 
 

 
function handler() { 
 
    alert(this.id) 
 
}

<ul> 
 
    <li id="illus-map">Map</li> 
 
    <li id="illus-privacy">Privacy</li> 
 
    <li id="illus-payment">Payment</li> 
 
    <li id="illus-rewards">Rewards</li> 
 
    <li id="illus-passcode">Passcode</li> 
 
</ul>