Question

我无法完成这项工作....当我们点击另一张图片时，我必须使用jquery来更改图像;所以，我有4个人，他们有3个图像，每个都有自己喜欢的东西。有两个图像作为按钮;一颗心和一盘。默认情况下，它必须显示3个喜欢的东西，如果我们点击心脏图像将显示，如果我们点击板图像，它将更改这3张图片的3张他们喜欢的食物的图像。

HTML

<div id="steve" class="ourLove">
   <img class="love1" />
   <img class="love2" />
   <img class="love3" />
   <img class="heart" />
   <img class="plate" />
</div>
<div id="betty" class="ourLove">
   <img class="love1" />
   <img class="love2" />
   <img class="love3" />
   <img class="heart" />
   <img class="plate" />
</div>
<div id="glen" class="ourLove">
   <img class="love1" />
   <img class="love2" />
   <img class="love3" />
   <img class="heart" />
   <img class="plate" />
</div>
<div id="maria" class="ourLove">
   <img class="love1" />
   <img class="love2" />
   <img class="love3" />
   <img class="heart" />
   <img class="plate" />
</div>

这是我的js

jQuery(document).ready(function() {     
   jQuery('.plate', this).click(function() {
     jQuery('.love1', this).attr('src', 'images/food1.jpg');
     jQuery('.love2', this).attr('src', 'images/food2.jpg');
     jQuery('.love3', this).attr('src', 'images/food3.jpg');
        return false;
    });
 jQuery('.heart', this).click(function() {
     jQuery('.love1', this).attr('src', 'images/love1.jpg');
     jQuery('.love2', this).attr('src', 'images/love2.jpg');
     jQuery('.love3', this).attr('src', 'images/love3.jpg');
        return false;
    });
  });

但似乎什么都不做。我点击“这个”的东西一定是我的错，但是我试图把它取下来，也没有任何改变。它必须永远这样做，我的意思是，如果客户点击每个按钮图像一千次，图像就会改变。

有任何帮助吗？谢谢

Answer 1

在这个问题中，我们需要识别点击盘子或心脏的用户。因此，我们需要找到触发click事件的div块，然后我们可以更改该特定div的love1，love2，love3的图像。我使用以下代码，它工作正常。

jQuery(document).ready(function() {     
    jQuery('.plate', this).click(function() {
      jQuery(this).parent().find('.love1').attr('src', 'images/food1.jpg');
      jQuery(this).parent().find('.love2').attr('src', 'images/food2.jpg');
      jQuery(this).parent().find('.love3').attr('src', 'images/food3.jpg');
      return false;
    });
    jQuery('.heart', this).click(function() {
      jQuery(this).parent().find('.love1').attr('src', 'images/love1.jpg');
      jQuery(this).parent().find('.love2').attr('src', 'images/love2.jpg');
      jQuery(this).parent().find('.love3').attr('src', 'images/love3.jpg');
      return false;
    });
  });

Answer 2

Vareen的回答是有道理的。但是，我会这样清理它：

jQuery实际上可以带有美元符号$，您不应该为每一行调用父级，只需将其分配给变量即可。您的点击功能也不再需要this，如下所示：

$(document).ready(function() {  

    $('.plate').click(function() {
        var $p = $(this).parent(); 
        $p.find('.love1').attr('src', 'images/food1.jpg');
        $p.find('.love2').attr('src', 'images/food2.jpg');
        $p.find('.love3').attr('src', 'images/food3.jpg');
        return false;
    });

    $('.heart').click(function() {
        var $p = $(this).parent(); 
        $p.find('.love1').attr('src', 'images/love1.jpg');
        $p.find('.love2').attr('src', 'images/love2.jpg');
        $p.find('.love3').attr('src', 'images/love3.jpg');
        return false;
    });

});

更改图像点击按钮

HTML

这是我的js

2 个答案: