Question

我试图从附加到事件监听器的函数中访问自定义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。但那也没有用。有关如何正确引用该属性的任何提示都会很棒。

Answer 1

从DOM属性检索的<ul class="nav navbar-nav"> <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> <a href.bind="row.href"> <img src="${row.settings}"> <span>${row.title}</span> </a> </li> </ul>为字符串picSelect，而在"1"语句中，您将其与数字switch进行比较。 1是switch/case比较。

使用===不是问题，它应该有用。

Answer 2

当您创建事件侦听器时，回调函数（在本例中为showCatPix）将在参数中接收事件。该事件具有target属性，该属性是发生事件的DOM元素。在这种情况下你的td。

详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Answer 3

这一般显示了如何访问数据属性。

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">

在Listener Function中访问HTML属性

3 个答案: