Javascript 基于父属性值的jQuery悬停效果

我写了一些代码，当图像被悬停在上面时，可以更改图像并淡出不透明度，从而产生悬停效果

我现在正试图修改代码，这样，如果悬停图像的父div具有value属性“added”，则悬停影响不会在该图像上触发

当父对象的值属性为“added”时，如何停止图像上的悬停效果

这就是我的HTML的外观：

$( document ).ajaxComplete(function() {
    var value = $('.add_list_button').val();
    var img = $(".add_list_button").children('img');
   $(img).hover(function(){
   $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
   },function(){
    $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
  });
});

已禁用悬停，值属性为“已添加”

---

您不需要jQuery，可以通过css属性选择器来实现

.add\u list\u按钮img:悬停{
边框：1px纯红；
}
.添加列表按钮[value=“added”]img:悬停{
边框：0纯红；
}

您可以使用css3选择器来实现此目的。而不是：

var img = $(".add_list_button").children('img');

使用

您的整个代码将是：

$( document ).ajaxComplete(function() {
    var value = $('.add_list_button').val();
   var img = $(".add_list_button:not([value='added'])").children('img');
   $(img).hover(function(){
   $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
   },function(){
    $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
  });
});

我认为您可以简化此代码。它可以是这样的：

$( document ).ajaxComplete(function() {
   $(".add_list_button:not([value='added']) img").hover(function(){
       $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
       },function(){
       $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
    });
});

编辑： 添加了点击事件

$( document ).ajaxComplete(function() {
   $(".add_list_button:not([value='added']) img")
   .hover(function(){
         $(this)
           .attr('src','assets/heart-full.png')
           .animate({opacity: 0.7}, 400);
       },function(){
         $(this)
           .attr('src','assets/heart-empty.png')
           .animate({opacity: 1}, 400);
       }
    )
    .click(function(){
       $(this)
           .unbind('mouseenter mouseleave click')
           .animate({opacity: 1}, 400)
           .attr('src','assets/heart-full.png')
       .parents('.add_list_button').val('added')
       ;
    });
});

---

我已经实现了代码，而且大部分都能正常工作。但是，我有另一个按钮，它单击并尝试将图像设置为（'src'，'assets/heart full.png'）并将属性设置为“added”，但是我无法设置图像。如果我删除了你的代码，我可以设置图像。基本上在悬停状态下，我想更改图像（如上所述），但我也希望在单击时更改图像！如何添加此项？是否要为悬停和单击事件添加相同的行为？是的。因此，基本上，在悬停状态下，如上面所述暂时更改src属性。然后单击“永久更改src属性”。我有一个类似jquery的按钮：$（this.children（'img'）.attr（“src”，“assets/heart-full.png”）；因此，当单击按钮时，按钮会更改图像，并且该值设置为“添加”。谢谢谢谢你的帮助，我想我可能把事情弄糊涂了——我想在点击之后保持图像的变化！这可能吗？

$( document ).ajaxComplete(function() {
    var value = $('.add_list_button').val();
   var img = $(".add_list_button:not([value='added'])").children('img');
   $(img).hover(function(){
   $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
   },function(){
    $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
  });
});

$( document ).ajaxComplete(function() {
   $(".add_list_button:not([value='added']) img").hover(function(){
       $(this).attr('src','assets/heart-full.png').animate({opacity: 0.7}, 400);
       },function(){
       $(this).attr('src','assets/heart-empty.png').animate({opacity: 1}, 400);
    });
});

$( document ).ajaxComplete(function() {
   $(".add_list_button:not([value='added']) img")
   .hover(function(){
         $(this)
           .attr('src','assets/heart-full.png')
           .animate({opacity: 0.7}, 400);
       },function(){
         $(this)
           .attr('src','assets/heart-empty.png')
           .animate({opacity: 1}, 400);
       }
    )
    .click(function(){
       $(this)
           .unbind('mouseenter mouseleave click')
           .animate({opacity: 1}, 400)
           .attr('src','assets/heart-full.png')
       .parents('.add_list_button').val('added')
       ;
    });
});