CODEWITHSUNDEEP
jquery
Cesar Bielich
Cesar Bielich

Reputation: 4945

jquery - change background image on current clicked element

I have multiple thumbsup and thumbsdown elements for specific movies in which users can thumbsup and thumbsdown. I need to change the background image of a class when clicked, but only for that particular <a> element. I can't seem to properly use the .this option to target that specific record so it only changes the background image for that specific element when clicked.

Right now this code changes the image for all the elements when clicked. For instance, if I click the thumbsup then it changes the background image for all three of them regardless of the id

My HTML

<a class="thumbsup" id="1"></a>
<a class="thumbsdown" id="1"></a>
<a class="thumbsup" id="2"></a>
<a class="thumbsdown" id="2"></a>
<a class="thumbsup" id="3"></a>
<a class="thumbsdown" id="3"></a>

My jquery Code

$( ".thumbsup" ).live("click", function(){
    movie_id = this.id;
    $.ajax({
        type: "POST",
        url: "includes/voting.php?",
        data: "movie_id="+ movie_id+
        "&thumbsup=1",
        success: function(data) {
            $('.thumbsup').css("background-image", "url(/images/thumbs_up_hover.png)");
            $('.thumbsdown').css("background-image", "url(/images/thumbs_down.png)");
        }
    });
    return false;
});
$( ".thumbsdown" ).live("click", function(){
    movie_id = this.id;
    $.ajax({
        type: "POST",
        url: "includes/voting.php?",
        data: "movie_id="+ movie_id+
        "&thumbsdown=1",
        success: function(data) {
            $('.thumbsdown').css("background-image", "url(/images/thumbs_down_hover.png)");
            $('.thumbsup').css("background-image", "url(/images/thumbs_up.png)");
        }
    });
    return false;
});

Upvotes: 0

Views: 119

Answers (2)

Laura
Laura

Reputation: 3383

Using an ID multiple times is invalid HTML, I suggest using a data attribute since you need the id in your ajax call, hence six different IDs are probably not fitting:

<button class="thumbsup" data-id="1"></button>
<button class="thumbsdown" data-id="1"></button>
<button class="thumbsup" data-id="2"></button>
<button class="thumbsdown" data-id="2"></button>
<button class="thumbsup" data-id="3"></button>
<button class="thumbsdown" data-id="3"></button>

you can then get the id in your function 

movie_id = $(this).data('id');

and update both buttons afterwards using the data-id attribute again

$('.thumbsup[data-id=' + movie_id + ']').css("background-image", "url(/images/thumbs_up_hover.png)");
$('.thumbsdown[data-id=' + movie_id + ']').css("background-image", "url(/images/thumbs_down.png)");

Upvotes: 1

Manwal
Manwal

Reputation: 23836

Try using unique ID for all element:

$( ".thumbsup" ).live("click", function(){
    movie_id = this.id;//you can use this id to change image of specific element
    $.ajax({
        type: "POST",
        url: "includes/voting.php?",
        data: "movie_id="+ movie_id+
        "&thumbsup=1",
        success: function(data) {
            $('#'+movie_id).css("background-image", "url(/images/thumbs_up_hover.png)");
        }
    });
    return false;
});

Upvotes: 1

Related Questions