php - jQuery - 仅更改单击的元素，并非所有元素都具有相同的类

Question

这个问题已经有答案了:

jQuery - change for only clicked element, not all with the same class (4 个回答)

已关闭 10 年前。

HTML/PHP 部分中的代码是在 while 查询中从数据库中提取的，因此这些类在整个文档中重复多次。当我点击.up img时，它会更改页面上具有该类的所有元素。我知道我可以使用 $(this). ，但我不确定这对 $('.down img'). 有何作用元素，因为它不是被单击的对象。我在想也许可以使用独特的 mod属性来识别吗？


HTML/PHP:

<div class="up"><img src="img/up-g.png" mod="<?=$row_mod['id']; ?>" /></div>
<div class="result"><?php echo votes_total($row_mod['id']); ?></div>
<div class="down"><img src="img/dw-g.png" mod="<?=$row_mod['id']; ?>"></div>

jQuery:

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

Answer 1

您的this方向是正确的，然后导航到同级:

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

...对于向下按钮也类似。长行将是 prevAll 而不是 nextAll:

$this.closest('.down').prevAll('.up').first().find('img').attr("src","img/up-g.png");

现在，如果它们位于容器中，其中它们是唯一的 .up 和 .down (例如，表格行，它们是唯一的在该行中，但当然其他行中还有其他内容)，这更容易一些:

// The up case
$this.closest('.container').find('.down img').attr("src","img/dw-g.png");

// The down case
$this.closest('.container').find('.up img').attr("src","img/up-g.png");