仅对类的一个单击元素执行操作

Question

我的HTML中有几行：

    <img src="Iconos/heart.png" alt="Fave" class="fave_icon">

我想在点击其中一个时更改'src'（但仅限于那个）

我尝试了这个，但它不起作用：

  $(document).on('click', '.fave_icon', function (event) { 
    if ($(this).getAttribute('src') == "Iconos/heart.png")
            {
                $(this).src = "Iconos/heart_coloured.png";
            }
            else
            {
                $(this).src = "Iconos/heart.png";
            }
});

Answer 1

this就是您所拥有的功能。

点击的元素为event.target。将$(this)替换为$(event.target)即可。

对于一般情况，如果目标元素具有子元素，则您的点击目标可能是孩子（.fave_icon）。使用closest()定位最近的.fave-icon：

$(document).on('click', '.fave_icon', function(event) {
  let elem = $(event.target).closest('.fave_icon');
  if (elem.getAttribute('src') == "Iconos/heart.png") {
    elem.src = "Iconos/heart_coloured.png";
  } else {
    elem.src = "Iconos/heart.png";
  }
});

Answer 2

我最终解决了这个问题：

    <img src="Iconos/heart.png" onclick="fav(this);" alt="Fave" class="fave_icon">

然后

function fav(heart){

if (heart.getAttribute('src') == "Iconos/heart.png")
            {
                heart.src = "Iconos/heart_coloured.png";
            }
            else
            {
                heart.src = "Iconos/heart.png";
            }