Доступ к атрибутам HTML внутри функции прослушивателя

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

В настоящее время у меня есть:

<td id= "kayak1" data-picid="1"><img src= "thumbnail.jpg"></td>

Слушатель:

var cat1 = document.getElementById("kayak1"); 
cat1.addEventListener("dblclick", showCatPix);

И моя функция:

function showCatPix() { 
    var picSelect = this.getAttribute("data-picid"); 
    switch(picSelect) { 
     case 1: 
      var catPix = document.getElementById("showCatPics"); 
      catPix.src ="cat_kayak.jpg"; 
      break; 
    } 
}

Событие правильно вызвать функцию, но showCatPix не имеет доступа к picid и ничего не отображается. Я также попытался использовать this.dataset.picid. Но это тоже не сработало. Любые советы о том, как правильно ссылаться на свойство, будут отличными.

источник

2015-04-26 Bruce Wayne

'Функция showCatPix()' 'изменение функции showCatPix (е)' и 'e.target.dataset.picid' и Mew в праздник. – jdphenix

Где идентификатор "showCatPics" в вашем HTML? – Leo

Возможно, это связано с тем, что в вашей функции «это» не является щелчком элемента. Когда вы добавляете слушателя, ваша функция принимает один параметр как событие. Затем внутри вашей функции вы можете получить доступ к элементу, нажав через 'e.target' – fmilani

The picSelect извлеченных из атрибута DOM является строкой "1", в то время как в switch заявления вы сравниваете его с номером 1. И switch/case - сравнение ===.

Использование this не является проблемой, она должна работать.

источник

2015-04-26 03:40:21 Leo

1. Была ли моя проблема. Большое спасибо:) –

ID был в моем HTML. Как только я изменил сравнение в корпусе коммутатора, все работало, как ожидалось. –

Когда вы создаете прослушиватель событий, функция обратного вызова, в этом случае showCatPix получит событие в параметре. Событие имеет атрибут target, который является элементом DOM, на котором произошло событие. В этом случае ваш тд.

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

источник

2015-04-26 03:41:33

Это показывает, как правило, как доступ к атрибутам данных.

var cat1 = document.getElementById("kayak1"); 
 
cat1.addEventListener("dblclick", showCatPix); 
 

 
function showCatPix(e) { 
 
    var picSelect = e.target.dataset.picid; // <-- key bit right here 
 
    console.log(e.target.dataset.picid); 
 
    switch (+picSelect) { // <-- coerce to number 
 
    case 1:    // also consider mapping an array of functions instead of a 
 
     alert('Meow!'); // switch, a personal maintainability preference of mine 
 
     break; 
 
    } 
 
}

<img id="kayak1" data-picid="1" src="http://placekitten.com/g/200/300">

источник

2015-04-26 03:42:06 jdphenix

Доступ к атрибутам HTML внутри функции прослушивателя

ответ

Смежные вопросы