针对Jquery的多个类的单个实例
问题描述:
我正在设计一个标题模块,单击时显示/隐藏标题。我想在动画完成后更改触发切换的按钮的文本。针对Jquery的多个类的单个实例
当按钮的一个实例存在时,下面的工作方式会存在,但如果存在更多,则文本不会更改。 我没有扎实的把握在DOM中移动,我如何使用$(this)
来定位活动按钮?
编辑:对于像我这样的其他初学者,请注意这是一个JS范围问题,而不是DOM问题。
JS:
$('.btn').click(function(){
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// After animation is done:
if($('.btn').text() == 'Hide'){
$('.btn').text('Show');
} else {
$('.btn').text('Hide');
}
});
});
HTML:
<div class="container">
<ul class="slides">
<li>...</li>
</ul>
<div class="caption">
<p class="txt"><span class="details">...</span></p>
</div>
<div class="btn">
<p class="txt">Hide</p>
</div>
</div>
将不胜感激快速解释,我在做什么错。谢谢!
答
尝试保存到外功能$(this
)的引用:
$('.btn').click(function(){
var self = $(this);
self.siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// After animation is done:
if(self.text() == 'Hide'){
self.text('Show');
} else {
self.text('Hide');
}
});
});
答
我认为下面标注的线应该有$(本),而不是$(“BTN。”):
$('.btn').click(function(){
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// After animation is done:
if($(this).text() == 'Hide'){ //<-- changed this line
$(this).text('Show'); //<-- changed this line
} else {
$(this).text('Hide'); //<-- changed this line
}
});
});
你现在的样子,它是选择所有.btn项目而且由于有多个,它不知道哪一个要改变。
答
功能在animate
功能失去参考点击.btn
这样。
要记住这个按钮是点击,只需保存在var
之前的.animate()
被点击的目标。
var btn = $(this)
然后,您可以通过btn
访问完整功能中的按钮。