我无法让Jquery .closest()
工作。
这是我的代码,它很简单,我看不出它为什么不起作用的原因:
Jquery的
show:function(a,fx){
$('.more-content').hide();
$(a).toggle(function() {
t = $(this).closest(".more-content")
if (fx.match('show')) {
t.show()
};
if (fx.match('slide')) {
t.slideDown()
};
if (fx.match('fade')) {
t.fadeIn()
};
$(this).html('Less')
}, function() {
if (fx.match('show')) {
t.hide()
};
if (fx.match('slide')) {
t.slideUp()
};
if (fx.match('fade')) {
t.fadeOut()
};
$(this).html('More')
});
}
HTML
<p><strong class="goal">The Goal</strong><br />
To support those who are NEET <span class="more-content">We do this by providing education or training to enable said people to be...</span>
<span class="more">More</span>
<br /><br />
To build community cohesion in the local area. <span class="more-content">This will lead to a community where people have the opportunity...</span>
<span class="more">More</span>
</p>
感到困惑,所以非常感谢任何帮助,谢谢
答案 0 :(得分:2)
如果传递给a
方法的show
变量是.more
元素,那么您要使用select a sibling元素,而不是祖先元素。
var t = $(this).prev(".more-content");
此外,您正在创建一个全局变量(t
)来保存切换功能的当前元素,但这不是一个好方法。只需在两个函数中选择正确的t
元素:
var fx ='slide';
$(a).toggle(function() {
var t = $(this).prev(".more-content");
if (fx.match('show')) {
console.log('1');
t.show();
};
if (fx.match('slide')) {
console.log('2');
t.slideDown();
};
if (fx.match('fade')) {
console.log('3');
t.fadeIn();
};
$(this).html('Less')
}, function() {
var t = $(this).prev(".more-content");
if (fx.match('show')) {
t.hide()
};
if (fx.match('slide')) {
t.slideUp()
};
if (fx.match('fade')) {
t.fadeOut()
};
$(this).html('More')
});