jQuery如何更改clicked属性

Question

I have code like this:

<div id="mtg_card"><a href="#" onclick="someEvent()"><img class="mtg_shop_cart" src="images/shop_cart_green.png" alt="" /></a></div>

it's going through loop so I have this same code X times... all is in one div called rounded-corner, and I wanted to change image in clicked div... I was trying code like this:

<script>
$( window ).load(function() {

    $('#rounded-corner #mtg_card').click(function(){
   $(this).$(".mtg_shop_cart").attr("src","http://mgla.pl/images/shop_cart.png");
 });
});

</script>

I would be greatful if you could help me with that.

Answer 1

<script>
$(function() {
    $('#rounded-corner #mtg_card').click(function(){
        $(this).find(".mtg_shop_cart").attr("src","http://mgla.pl/images/shop_cart.png");
        return false;
    });
});
</script>

This seems about right. Just remember you can't have multiple elements with same ID in your HTML.

Answer 2

Try this:

<script>
$(window).load(function () {
$('#rounded-corner #mtg_card').click(function () {
    $(this).find(".mtg_shop_cart").attr('src', '<source here>');
    return false;
});
});
</script>

DEMO

Answer 3

You need to return false in order for the event handlers to realize the event was received:

<script>
$( window ).load(function() {
    $('#rounded-corner #mtg_card').click(function(){
        $(this).find(".mtg_shop_cart").attr("src","http://mgla.pl/images/shop_cart.png");
        return false
    });
});
</script>

Answer 4

Two problems:

You should replace the id="mtg_card" with a class, and then do this:

<div class="mtg_card"><a href="#" onclick="someEvent()"><img class="mtg_shop_cart" src="images/shop_cart_green.png" alt="" /></a></div>

<script>
$( window ).load(function() {

    $('#rounded-corner .mtg_card').click(function(){
   $(this).find(".mtg_shop_cart").attr("src","http://mgla.pl/images/shop_cart.png");
 });
});

</script>