Как получить индекс элемента массива

326
18 августа 2017, 00:02
    var wrapperPlayList = document.getElementById('wrapperPlayList'),
    p = document.createElement('p'),
    mus = music[0];

    var music = [
'../binary/sounds/music/Strangersbynight.mp3',
'../binary/sounds/music/029 E-Type - Russian lullaby.mp3',
'../binary/sounds/music/035 Technotronic - This beat is Technotronic.mp3',
'../binary/sounds/music/037 Radiorama - Desire.mp3',
'../binary/sounds/music/039 Silent circle - Touch in the night.mp3'
];
for (var i = 0; i < music.length; i++) {
    var playList = p.cloneNode(true);
    playList.innerHTML = music[i];
    playList.className = 'playList';
    wrapperPlayList.appendChild(playList);
    playList.addEventListener('click', function () {
    /*
    как мне тут при клике получиь индекс --- playList 
    */  
    })
}
Answer 1

Вам нужно создать замыкание, в котором хранить этот самый индекс, для этого addEventListener надо вынести в отдельную функцию в которою передавать индекс, в следствии чего индекс будет сохраняться в замыкании функции обработчика клика и вы сможете его использовать.

Вот краткий пример :

var music = [ 
  '../binary/sounds/music/Strangersbynight.mp3', 
  '../binary/sounds/music/029 E-Type - Russian lullaby.mp3', 
  '../binary/sounds/music/035 Technotronic - This beat is Technotronic.mp3', 
  '../binary/sounds/music/037 Radiorama - Desire.mp3', 
  '../binary/sounds/music/039 Silent circle - Touch in the night.mp3' 
]; 
 
document.addEventListener('DOMContentLoaded', function() { 
  for (var i = 0; i < music.length; i++) { 
    addEventListenerToBtn(i, document.getElementById('btn' + i)) 
  } 
}); 
 
 
function addEventListenerToBtn(index, btn) { 
  btn.addEventListener('click', function() { 
    console.log(music[index]); 
  }); 
};
<button id="btn0">btn0</button> 
<button id="btn1">btn1</button> 
<button id="btn2">btn2</button> 
<button id="btn3">btn3</button> 
<button id="btn4">btn4</button>

Вот пример с вашими тегами p:

var music = [ 
  '../binary/sounds/music/Strangersbynight.mp3', 
  '../binary/sounds/music/029 E-Type - Russian lullaby.mp3', 
  '../binary/sounds/music/035 Technotronic - This beat is Technotronic.mp3', 
  '../binary/sounds/music/037 Radiorama - Desire.mp3', 
  '../binary/sounds/music/039 Silent circle - Touch in the night.mp3' 
]; 
 
var wrapperPlayList = document.getElementById('wrapperPlayList'), 
  p = document.createElement('p'), 
  mus = music[0]; 
 
for (var i = 0; i < music.length; i++) { 
  var playList = p.cloneNode(true); 
  playList.innerHTML = music[i]; 
  playList.className = 'playList'; 
 
  wrapperPlayList.appendChild(playList); 
 
  addEventListenerToP(i, playList); 
} 
 
function addEventListenerToP(index, _p) { 
  _p.addEventListener('click', function() { 
    console.log(music[index]); 
  }); 
};
<div id="wrapperPlayList"> 
</div>

Answer 2

Как вариант можно ещё вот так. С авто генерацией элементов:

var music = [ 
  '../binary/sounds/music/Strangersbynight.mp3', 
  '../binary/sounds/music/029 E-Type - Russian lullaby.mp3', 
  '../binary/sounds/music/035 Technotronic - This beat is Technotronic.mp3', 
  '../binary/sounds/music/037 Radiorama - Desire.mp3', 
  '../binary/sounds/music/039 Silent circle - Touch in the night.mp3' 
]; 
 
function addEventListenerToBtn(index, btn) { 
  btn.addEventListener('click', function() { 
    alert("Download: " + this.innerHTML + "\n\r" +  
          "His id: " + this.getAttribute("data-id")); 
  }); 
}; 
 
function splitName(str) { 
  if (typeof str != "undefined") {   
    return str.split("/"); 
  } 
} 
     
function createBtn(tracks) { 
  if (tracks.length > 0 && tracks) {	 
    for (let i = 0; i < tracks.length; i++) { 
 
      let p = document.createElement('p'), 
          track_name = splitName(tracks[i]); 
 
      p.id = "track-" + i; 
      p.className += "playList"; 
      p.setAttribute("data-id", i); 
      p.innerHTML = track_name[track_name.length-1];     
      document.body.appendChild(p); 
      addEventListenerToBtn(i, document.getElementById("track-" + i));   
    } 
  } 
} 
     
createBtn(music);

READ ALSO
Генерация дерева Nested Sets

Генерация дерева Nested Sets

Реализовать функцию drawNestedSetsTree(data, node), которая принимает на вход два аргумента:

547
Как закрыть все popover bootstrap

Как закрыть все popover bootstrap

Нажимаем первую картинкувторая не закрылась

259
Адаптивная ширина видео

Адаптивная ширина видео

Сайт на bootstrap, на сайте много видео с разной шириной, при просмотре на мобильных вылазит за границу экрана, ставлю width:100%, на мобильном ОК, а на ПК все...

318
Как вытащить( ссылку )точнее селектор из location.href средствами рhpQuery?

Как вытащить( ссылку )точнее селектор из location.href средствами рhpQuery?

Как вытащить ссылку, а точнее селектор из locationhref средствами рhpQuery?

234