[英]why my jquery won't work?
我的查询代码有问题。 我正在创建一个简单的滑块,当我创建#prev
按钮功能时它不起作用,但它与我的#next
按钮一起工作,这是为什么? 当我删除#prev
处理程序时,它通常只能与#next
一起#next
。 这是代码:
$(document).ready(function () {
// set options
var speed = 500;
var autoswitch = true;
var autoswitch_speed = 4000;
$('.slide').first().addClass('active'); // add the initial active class
$('.slide').hide(); // hide all slides
$('.active').show(); // show first slide
// when the next/prev button clicked
$('#next').on('click', function () {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
};
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
$('#prev').on('click', function () {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
};
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});
您已在 .next 按钮单击事件中插入了 .prev 按钮单击事件
$(document).ready(function () { // set options var speed = 500; var autoswitch = true; var autoswitch_speed = 4000; // add the initial active class $('.slide').first().addClass('active'); // hide all slides $('.slide').hide(); // show first slide $('.active').show(); // when the next/prev button clicked $('#next').on('click', function () { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.slide').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); }; $('.oldActive').removeClass('oldActive'); $('.slide').fadeOut(speed); $('.active').fadeIn(speed); }); $('#prev').on('click', function () { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.slide').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); }; $('.oldActive').removeClass('oldActive'); $('.slide').fadeOut(speed); $('.active').fadeIn(speed); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.