jQuery - 只改变点击的元素,并非全部使用相同的类 [英] jQuery - Only change for clicked element, not all with the same class
问题描述
.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屋!