Question

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');
    });
});

...同样适用于down按钮。其长线为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");

Answer 2

$(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.parent().next().next().find("img").attr("src","img/dw-g.png");
        }, 'json');
});
$('.down img').click( function(){
        var postDataDw = $(this).attr('mod');
        $.post('/votePost.php', {varDw: postDataDw}, function(o){
            console.log(o);
            $this.attr("src","img/dw.png");
            $this.parent().next().next().find("img").attr("src","img/up-g.png");
        }, 'json');
});
});

Answer 3

尝试

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

编辑：尝试使用标记

jQuery - 仅更改单击的元素，而不是所有具有相同的类

3 个答案: