我正在学习Jquery并希望做得更好。我找到了一个解决方案,并想看看经验丰富的老将如何做到这一点......如果有更多的口才,可以这么说。
问题是我有一个小部件放在一个表行中。窗口小部件与所有其他窗口小部件具有相同的类。当有人点击特定小部件时,只有该小部件应该更改。
这是HTML:
<div class="deal-widget">
<div class="deal-widget-left">
<div class="deal-widget-left-countdown">
<span class="totalcoupons">500</span> of <span class="maxcoupons">500</span>
</div>
<div class="deal-widget-left-remain">
Remaining
</div>
</div>
<div class="deal-widget-right is_open">
<a href="/deal/claim/1113" class="deal-link">Claim It!</a>
</div>
</div>
这是我对JQuery的抨击:
Drupal.behaviors.plusone = function (context) {
$('a.deal-link:not(.deal-processed)', context).click(function () {
var parent = $(this).parents('div.deal-widget');
var originalVote = parent.children('div.deal-widget-left').children('div.deal-widget-left-countdown').children('span.totalcoupons').text();
var originalVoteInt = parseInt(originalVote);
var voteSaved = function (data) {
parent.children('div.deal-widget-left').children('div.deal-widget-left-countdown').children('span.totalcoupons').html(originalVoteInt - data.total_votes);
parent.children('div.deal-widget-right').html(data.voted);
parent.children('div.deal-widget-right').removeClass('is_open').addClass(data.votedClass);
}
$.ajax({
type: 'POST',
url: this.href,
dataType: 'json',
success: voteSaved,
data: 'js=1'
});
return false;
})
.addClass('deal-processed');
}
是否有更好的方法可以选择父项,然后选择第二组子项作为点击后的对象?
由于
乔
答案 0 :(得分:2)
我建议使用:
var parent = $(this).closest('div.deal-widget');
var originalVote = parent.find('span.totalcoupons').text();
closest()
在祖先元素中搜索与提供的选择器匹配的第一个元素; find()
在后代元素中搜索与提供的选择器匹配的元素。
虽然closest()
只返回一个匹配项(最接近的 / * first *元素与选择器匹配),但重要的是要注意find()
可能会返回多个元素。
参考文献:
答案 1 :(得分:1)
使用find()?所以:
var originalVote = parent.children('div.deal-widget-left').children('div.deal-widget-left-countdown').children('span.totalcoupons').text();
成为:
var originalVote = parent.find('span.totalcoupons').text();
我不确定你到底在找什么......