jQuery - 只改变点击的元素，并非全部使用相同的类 [英] jQuery - Only change for clicked element, not all with the same class

问题描述

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




HTML / PHP：

 < div class =up>< img src =img / up-g.pngmod =<？= $ row_mod ['id'];？> />< / DIV> 
< div class =result><？php echo votes_total（$ row_mod ['id']）; ？>< / DIV> 
< div class =down>< img src =img / dw-g.pngmod =<？= $ 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）; 
 $（' （'.rc'，'img / up.png'）; 
 $（'。down img'）。attr（src，img / dw-g.png） ; 
}，'json'）; 
}）; 
}）; 
  

解决方案

$ c $> ，然后导航到兄弟：

  $（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（ '向下 '）。prevAll（'。起来 '）。第一个（）。找到（' IMG'）。ATTR（ SRC，IMG /up-g.png）; 
  

现在，如果它们位于只有的容器中。 和 .down （一个表格行，比如它们是 行中唯一的行，但是当然，其他行中还有其他的行），它更容易一些：

  //上行情况
 $ this。最近（'。container'）。find（'。down img'）。attr（src，img / dw-g.png）; 
 
 // down格子
 $ this.closest（'。container'）。find（'。up img'）。attr（src，img / up-g。 PNG）; 
  

The code in the HTML/PHP section is pulled from a database in a while query, so the classes are repeated multiple times throughout the document. When I click on .up img, it changes all of the elements on the page with that class. I know I can use $(this)., but I'm not sure how that will work for the $('.down img'). element, since it isn't the object being clicked. I was thinking it may be possible to use the unique mod attribute to identify it?


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

解决方案

You're on the right track with this, and then you navigate to the sibling:

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

...and similarly for the down button. The long line for that would be prevAll rather than nextAll:

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

Now, if these are in a container where they're the only .up and .down (a table row, say, where they're the only ones in that row but of course there are others in other rows), it's a bit easier:

// 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");

这篇关于jQuery - 只改变点击的元素，并非全部使用相同的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！