0

HTML/PHP 部分中的代码是在一段时间查询中从数据库中提取的，因此这些类在整个文档中重复多次。当我单击 时.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');
    });
});
4

3 回答 3

4

你在正确的轨道上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");
于 2013-04-23T10:37:35.520 回答
1 
$(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');
});
});
于 2013-04-23T10:38:20.147 回答
-1

尝试

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

编辑：尝试使用标志

于 2013-04-23T10:33:44.610 回答