无法通过点击获取元素数据

Question

各位，我一直坚持一件事。我在 JavaScript、JQuery 中有这样的代码。 而那些带有点击的下部，我只是无法从点击的元素中获取 data-num 属性。我已经尝试了 100 种方法来做到这一点，但它总是未定义（但如果我通过开发工具检查元素，这个“data-num”确实存在），或者粉碎或不起作用。

let tumbArr = [];
for (x = 0; x < imgARR.length; x++) {
    let thumb = document.createElement('button');
    $(thumb).css('background-image', 'url(' + images[x].src +')');
    elements.append(thumb);
    $(thumb).attr('id', 'thumb' + x)
    $(thumb).attr('data-num', x);
    tumbArr[x] = $(thumb);
    $(thumb).attr('class', 'thumbs');    
}
$('#thumbCase').append(elements);

// this part bellow
$('.thumbs').click(()  =>  {
    s = $(this).attr('data-num');
    imgSet(s);
})

当我制作一个待办事项应用程序时，一切都是这样工作的......

addButton.click(() => {
    clickCount++;
    let newLI = document.createElement('li');
    newLI.textContent = addIN.value;
    elements.append(newLI);
    ul.append(elements);
    $(newLI).addClass('donePlan');
    $(newLI).attr('id','plan' + clickCount );
   
    del = document.createElement('button');
    $(del).addClass('delbutton');
    $(del).html('<img src="./delete_ic_icon.png">');
    newLI.append(del);
    $(del).attr('data-plan', '#plan' + clickCount)
   ** let planID = $(this.del).attr('data-plan');
    
   
    $(del).click (()=> {
        $(planID).remove();**
    })
   
})

请帮助我，谢谢

我尝试使 .thumbs 类像变量一样，以除此之外选择按钮，我在循环 tumbArr[x] = $(thumb) 中从此按钮创建了一个数组，但它并不像我想要的那样工作，并且就像我认为从逻辑上来说应该可行一样。

Answer 1

• 您使用箭头函数，其中

  this

  的工作方式不同。箭头函数中的

  this

  是外部作用域的

  this

  。因此，您应该在箭头函数中使用

  Event::target

  而不是

  this

  ，或者使用常用的

  function(){}

  。

• 似乎您尝试将单击事件委托给父容器

  .thumbs

  。在这种情况下，

  this

  将是容器的 DOM 元素，处理程序将对所有单击做出反应，而您只需要单击按钮。您应该使用特殊的委托函数签名，以便

  this

  将指向单击的按钮。

所以箭头功能选项：

$('.thumbs').on('click', 'button', event => {
    s = $(event.target).attr('data-num');
    imgSet(s);
})

功能选项：

$('.thumbs').on('click', 'button', function() {
    s = $(this).attr('data-num');
    imgSet(s);
})