CODEWITHSUNDEEP
jquery
Vasquez21
Vasquez21

Reputation: 59

jquery how to change clicked attribute

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.

Upvotes: 0

Views: 39

Answers (4)

sol
sol

Reputation: 174

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>

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

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

Upvotes: 0

Jenian
Jenian

Reputation: 592

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>

Upvotes: 0

Sergey Mitroshin
Sergey Mitroshin

Reputation: 113

<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.

Upvotes: 1

Related Questions