我设置了 2 个单击函数,第一个允许您单击并滚动浏览.test
div。在此之后,.test:last-child
的目标是删除red
类,添加blue
类,然后在blue
类div 上触发单击函数,并将其隐藏。唯一的问题是它似乎无法识别.blue
div 上的单击功能并且不起作用。
jsFiddle demo:http://jsfiddle.net/neal_fletcher/adMYV/1/
.HTML:
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
j查询:
$(document).ready(function () {
$(".red").click(function () {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
return false;
});
});
$(document).ready(function () {
$('.test:last-child').removeClass('red').addClass('blue');
$('.blue').click(function () {
$(this).hide();
return false;
});
});
任何建议将不胜感激!
尝试如下:
http://jsfiddle.net/adMYV/3/
法典
$(document).on("click", ".blue", function () {
$(this).hide();
return false;
});
您可以在 .test 选择器上执行单击事件。并且在单击函数事件中,用户具有类jquery函数,并在每种情况下根据需要进行操作。
编辑:喜欢这个:
$(document).ready(function () {
$(".test").click(function () {
if($(this).hasClass('red')) {
var next;
next = $(this).nextAll(".test");
$('html, body').animate({
scrollTop: next.offset().top
}, "slow");
} else if($(this).hasClass('blue')) {
$(this).hide();
}
return false;
});
$('.test:last-child').removeClass('red').addClass('blue');
});
看看 http://jsfiddle.net/adMYV/4/