Jquery - Change For Only Clicked Element, Not All With The Same Class

What I would like to do is change an object's attribute, but for only that one. So something like, $('.up img').attr('src','img/up.png') for the one that has been clicked, not all

Solution 1:

Use $(this) instead to target only the particular element of that class which was clicked on, instead of using the class selector.

$('.up img').click( function(){
        var postDataUp = $(this).attr('mod');
        $.post('/votePost.php', {varUp: postDataUp}, function(o){
            console.log(o);
            if(o == 1){
                $(this).attr("src","img/up.png");
            }elseif(o == 2){
                $(this).attr("src","img/up-g.png");
                $('.down img').attr("src","img/dw.png");
            }elseif(o == 3){
                $(this).attr("src","img/up.png");
            }
        }, 'json');
});

Solution 2:

You could change your code to target the specific element.

$('.up img').click( function(){
    var postDataUp = $(this).attr('mod');

    // get the specific element that you have clicked.// i use the $ before the name to easily identify jquery elements.var $elm = $(this);

    $.post('/votePost.php', {varUp: postDataUp}, function(o){
        console.log(o);
        if(o == 1){
            // targeting the specific element
            $elm.attr("src","img/up.png");
        }elseif(o == 2){
            // targeting the specific element
            $elm.attr("src","img/up-g.png");
            $('.down img').attr("src","img/dw.png"); // not sure if you want to target individual element here?
        }elseif(o == 3){
            // targeting the specific element
            $elm.attr("src","img/up.png");
        }
    }, 'json');
});

If you are going to target the $('.down img') which is specific to the element that is clicked on, then you can use the $elm element to then traverse the DOM nodes.

Solution 3:

Try this -

$('.up img').click( function(){
        var postDataUp = $(this).attr('mod');
        var clicked = $(this);
        $.post('/votePost.php', {varUp: postDataUp}, function(o){
            console.log(o);
            if(o == 1){
                $(clicked).attr("src","img/up.png");
            }elseif(o == 2){
                $(clicked).attr("src","img/up-g.png");
                $('.down img').attr("src","img/dw.png");
            }elseif(o == 3){
                $(clicked).attr("src","img/up.png");
            }
        }, 'json');
});

Solution 4:

$('.up img').click( function(){
    var $this=$(this);
    var postDataUp = $this.attr('mod');
    $.post('/votePost.php', {varUp: postDataUp}, function(o){
        console.log(o);
        if(o == 1){
           $this.attr("src","img/up.png");
        }elseif(o == 2){
            $this.attr("src","img/up-g.png");
            $this.attr("src","img/dw.png");
        }elseif(o == 3){
            $this.attr("src","img/up.png");
        }
    }, 'json');
});