JQuery - Ändern Sie nur das angeklickte Element, nicht alle mit derselben Klasse

Question

Was ich tun möchte, ist ein Attribut eines Objekts ändern, aber nur für dieses eine. Also etwas wie $('.up img').attr("src","img/up.png") für das, was angeklickt wurde, nicht alle Elemente, die .up img haben.

jQuery:

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

Answer 1

Verwenden Sie $(this), um nur das konkrete Element dieser Klasse anzusprechen, auf das geklickt wurde, anstatt den Klassenselektor zu verwenden.

$('.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");
            }else if(o == 2){
                $(this).attr("src","img/up-g.png");
                $('.down img').attr("src","img/dw.png");
            }else if(o == 3){
                $(this).attr("src","img/up.png");
            }
        }, 'json');
});

Answer 2

Sie könnten Ihren Code ändern, um das spezifische Element anzusprechen.

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

    // das spezifische Element erhalten, das Sie angeklickt haben.
    // Ich benutze das $ vor dem Namen, um jQuery-Elemente leicht zu identifizieren.
    var $elm = $(this);

    $.post('/votePost.php', {varUp: postDataUp}, function(o){
        console.log(o);
        if(o == 1){
            // das spezifische Element anvisieren
            $elm.attr("src","img/up.png");
        }else if(o == 2){
            // das spezifische Element anvisieren
            $elm.attr("src","img/up-g.png");
            $('.down img').attr("src","img/dw.png"); // bin mir nicht sicher, ob Sie hier auf einzelne Elemente abzielen wollen?
        }else if(o == 3){
            // das spezifische Element anvisieren
            $elm.attr("src","img/up.png");
        }
    }, 'json');
});

Wenn Sie auf das $('.down img') abzielen, das spezifisch für das angeklickte Element ist, können Sie das $elm Element verwenden, um dann die DOM-Knoten zu durchlaufen.

Answer 3

Versuchen Sie dies -

$('.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");
            }else if(o == 2){
                $(clicked).attr("src","img/up-g.png");
                $('.down img').attr("src","img/dw.png");
            }else if(o == 3){
                $(clicked).attr("src","img/up.png");
            }
        }, 'json');
});

Answer 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");
        }else if(o == 2){
            $this.attr("src","img/up-g.png");
            $this.attr("src","img/dw.png");
        }else if(o == 3){
            $this.attr("src","img/up.png");
        }
    }, 'json');
});