Javascript 为什么滑块循环时addClass和removeClass不再工作?
我有一个旋转木马滑块,它下面有4个圆圈,用于在显示特定滑块时通知用户。为此,我根据索引添加和删除类 这段代码第一次对我有效,但一旦旋转木马再次循环回索引0,它就会停止工作。我知道代码正在工作,因为我的所有控制台日志都显示在我的控制台中。因此,循环肯定正在发生。问题是,一旦滑块循环,我的jQuery代码就会停止添加和删除类 当滑块循环回索引0时,如何使jQuery中的addClass和removeClass方法继续工作Javascript 为什么滑块循环时addClass和removeClass不再工作?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个旋转木马滑块,它下面有4个圆圈,用于在显示特定滑块时通知用户。为此,我根据索引添加和删除类 这段代码第一次对我有效,但一旦旋转木马再次循环回索引0,它就会停止工作。我知道代码正在工作,因为我的所有控制台日志都显示在我的控制台中。因此,循环肯定正在发生。问题是,一旦滑块循环,我的jQuery代码就会停止添加和删除类 当滑块循环回索引0时,如何使jQuery中的addClass和removeClass方法继续工作 <div style="display: inline-block;
<div style="display: inline-block;">
<div class="greenCircle carouselCircle"></div>
<div class="greyCircle2 greenCircle2 carouselCircle"></div>
<div class="greyCircle3 greenCircle3 carouselCircle"></div>
<div class="greyCircle4 greenCircle4 carouselCircle"></div>
</div>
$(document).ready(function() {
if (index === 0){
$(".carouselCircle").removeClass("greenCircle4");
$(".carouselCircle").addClass("greyCircle4");
console.log("ahoy I am index 0");
}
else if(index === 1){
$(".carouselCircle").removeClass("greenCircle");
$(".carouselCircle").addClass("greyCircle");
$(".carouselCircle").removeClass("greyCircle2");
console.log("ahoy I am index 1");
}
else if(index === 2){
$(".carouselCircle").removeClass("greyCircle3");
$(".carouselCircle").addClass("greyCircle2");
console.log("ahoy I am index 2");
}
else if(index === 3){
$(".carouselCircle").removeClass("greyCircle4");
$(".carouselCircle").addClass("greyCircle3");
$(".carouselCircle").removeClass("greyCircle");
$(".carouselCircle").addClass("greenCircle");
console.log("Ahoy I am index 3");
}
});
$(文档).ready(函数(){
如果(索引==0){
$(“.carouselCircle”).removeClass(“绿色圆圈4”);
$(“.carouselCircle”).addClass(“灰色圆圈4”);
log(“我是索引0”);
}
else if(索引===1){
$(“.carouselCircle”).removeClass(“绿色圆圈”);
$(“.carouselCircle”).addClass(“灰色圆圈”);
$(“.carouselCircle”).removeClass(“greyCircle2”);
log(“我是索引1”);
}
否则如果(索引===2){
$(“.carouselCircle”).removeClass(“greyCircle3”);
$(“.carouselCircle”).addClass(“greyCircle2”);
log(“我是索引2”);
}
否则如果(索引===3){
$(“.carouselCircle”).removeClass(“greyCircle4”);
$(“.carouselCircle”).addClass(“greyCircle3”);
$(“.carouselCircle”).removeClass(“灰色圆圈”);
$(“.carouselCircle”).addClass(“绿圈”);
log(“我是索引3”);
}
});
下面是循环代码,我将jQuery注入其中。它有点长,所以这是只有当你必须知道所有的细节
/**
* Wallop.js
*
* @fileoverview Minimal JS library to show & hide things
*
* @author Pedro Duarte
* @author http://pedroduarte.me/wallop
*
*/
(function(global){
function Wallop(selector, options) {
if (!selector) { throw new Error('Missing selector. Refer to Usage documentation: https://github.com/peduarte/wallop#javascript'); }
for (var i = 0; i < selectorPool.length; i++) {
if (selectorPool[i] === selector) {
throw new Error('An instance of Wallop with this selector already exists.');
}
}
this.options = {
buttonPreviousClass: 'Wallop-buttonPrevious',
buttonNextClass: 'Wallop-buttonNext',
itemClass: 'Wallop-item',
currentItemClass: 'Wallop-item--current',
showPreviousClass: 'Wallop-item--showPrevious',
showNextClass: 'Wallop-item--showNext',
hidePreviousClass: 'Wallop-item--hidePrevious',
hideNextClass: 'Wallop-item--hideNext',
carousel: true
};
// Whitelist elements which contain `length`
this.whitelist = {
'form': true
};
if (selector.length > 0 && !this.whitelist[selector]) {
throw new Error('Selector cannot be an array, Refer to Usage documentation: https://github.com/peduarte/wallop#javascript');
} else {
this.$selector = selector;
}
this.options = extend(this.options, options);
this.event = null;
// "Global vars"
this.reset();
this.buttonPrevious = this.$selector.querySelector(' .' + this.options.buttonPreviousClass);
this.buttonNext = this.$selector.querySelector(' .' + this.options.buttonNextClass);
this.bindEvents();
this.createCustomEvent();
// If there is no active item, start at 0
if (this.currentItemIndex === -1) {
this.currentItemIndex = 0;
addClass(this.allItemsArray[this.currentItemIndex], this.options.currentItemClass);
}
// Update button states to make sure the correct state is set on initialization
this.updateButtonStates();
// Wrapped in timeout function so event can
// be listened from outside at anytime
var _this = this;
setTimeout(function() {
_this.event.detail.currentItemIndex = _this.currentItemIndex;
_this.$selector.dispatchEvent(_this.event);
}, 0);
}
var selectorPool = [];
var WS = Wallop.prototype;
// Update prev/next disabled attribute
WS.updateButtonStates = function () {
if ((!this.buttonPrevious && !this.buttonNext) || this.options.carousel) { return; }
if (this.currentItemIndex === this.lastItemIndex) {
this.buttonNext.setAttribute('disabled', 'disabled');
} else if (this.currentItemIndex === 0) {
this.buttonPrevious.setAttribute('disabled', 'disabled');
}
};
// Reset all settings by removing classes and attributes added by goTo() & updateButtonStates()
WS.removeAllHelperSettings = function () {
removeClass(this.allItemsArray[this.currentItemIndex], this.options.currentItemClass);
removeClass($$(this.options.hidePreviousClass, this.$selector), this.options.hidePreviousClass);
removeClass($$(this.options.hideNextClass, this.$selector), this.options.hideNextClass);
removeClass($$(this.options.showPreviousClass, this.$selector), this.options.showPreviousClass);
removeClass($$(this.options.showNextClass, this.$selector), this.options.showNextClass);
if (!this.buttonPrevious && !this.buttonNext) { return; }
this.buttonPrevious.removeAttribute('disabled');
this.buttonNext.removeAttribute('disabled');
};
// Method to add classes to the right elements depending on the index passed
WS.goTo = function (index) {
if (index === this.currentItemIndex) { return; }
// Fix the index if it's out of bounds and carousel is enabled
index = index === -1 && this.options.carousel ? this.lastItemIndex : index;
index = index === this.lastItemIndex + 1 && this.options.carousel ? 0 : index;
// Exit when index is out of bounds
if (index < 0 || index > this.lastItemIndex) { return; }
this.removeAllHelperSettings();
var isForwards = (index > this.currentItemIndex || index === 0 && this.currentItemIndex === this.lastItemIndex) && !(index === this.lastItemIndex && this.currentItemIndex === 0);
addClass(this.allItemsArray[this.currentItemIndex], isForwards ? this.options.hidePreviousClass : this.options.hideNextClass);
addClass(this.allItemsArray[index], this.options.currentItemClass + ' ' + (isForwards ? this.options.showNextClass : this.options.showPreviousClass));
this.currentItemIndex = index;
$(document).ready(function() {
if (index === 0){
$(".carouselCircle").removeClass("greenCircle4");
$(".carouselCircle").addClass("greyCircle4");
console.log("ahoy I am index 0");
}
else if(index === 1){
$(".carouselCircle").removeClass("greenCircle");
$(".carouselCircle").addClass("greyCircle");
$(".carouselCircle").removeClass("greyCircle2");
console.log("ahoy I am index 1");
}
else if(index === 2){
$(".carouselCircle").removeClass("greyCircle3");
$(".carouselCircle").addClass("greyCircle2");
console.log("ahoy I am index 2");
}
else if(index === 3){
$(".carouselCircle").removeClass("greyCircle4");
$(".carouselCircle").addClass("greyCircle3");
$(".carouselCircle").removeClass("greyCircle");
$(".carouselCircle").addClass("greenCircle");
console.log("Ahoy I am index 3");
}
});
/*
this.updateButtonStates();
this.event.detail.currentItemIndex = this.currentItemIndex;
this.$selector.dispatchEvent(this.event);
};
// Previous item handler
WS.previous = function () {
this.goTo(this.currentItemIndex - 1);
};
// Next item handler
WS.next = function () {
this.goTo(this.currentItemIndex + 1);
};
// Update global variables
WS.reset = function () {
this.allItemsArray = Array.prototype.slice.call(this.$selector.querySelectorAll(' .' + this.options.itemClass));
this.currentItemIndex = this.allItemsArray.indexOf(this.$selector.querySelector(' .' + this.options.currentItemClass));
this.lastItemIndex = this.allItemsArray.length - 1;
};
// Attach click handlers
WS.bindEvents = function () {
selectorPool.push(this.$selector);
var _this = this;
if (this.buttonPrevious) {
this.buttonPrevious.addEventListener('click', function (event) {
event.preventDefault();
_this.previous();
});
}
if (this.buttonNext) {
this.buttonNext.addEventListener('click', function (event) {
event.preventDefault();
_this.next();
});
}
};
// Method to bind custom event
WS.on = function (eventName, callback) {
this.$selector.addEventListener(eventName, callback, false);
};
// Method to unbind custom event
WS.off = function (eventName, callback) {
this.$selector.removeEventListener(eventName, callback, false);
};
// Create custom Event
WS.createCustomEvent = function () {
var _this = this;
this.event = new CustomEvent('change', {
detail: {
wallopEl: _this.$selector,
currentItemIndex: Number(_this.currentItemIndex)
},
bubbles: true,
cancelable: true
});
};
// Helper functions
function $$(element, container) {
if (!element) { return; }
if (!container) {
container = document;
}
return container.querySelector('.' + element);
}
function addClass(element, className) {
if (!element) { return; }
element.className = (element.className + ' ' + className).trim();
}
function removeClass(element, className) {
if (!element) { return; }
element.className = element.className.replace(className, '').trim();
}
function extend(origOptions, userOptions){
var extendOptions = {}, attrname;
for (attrname in origOptions) { extendOptions[attrname] = origOptions[attrname]; }
for (attrname in userOptions) { extendOptions[attrname] = userOptions[attrname]; }
return extendOptions;
}
// Pollyfill for CustomEvent() Constructor - thanks to Internet Explorer
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.CustomEvent ? window.CustomEvent.prototype : {};
window.CustomEvent = CustomEvent;
// Exports to multiple environments
if(typeof define === 'function' && define.amd){ //AMD
define(function () { return Wallop; });
} else if (typeof module !== 'undefined' && module.exports){ //node
module.exports = Wallop;
} else { // browser
// use string because of Google closure compiler ADVANCED_MODE
/* jslint sub:true */
global['Wallop'] = Wallop;
}
}(this));
/**
*Wallop.js
*
*@fileoverview用于显示和隐藏内容的最小JS库
*
*@作者佩德罗·杜阿尔特
*@作者http://pedroduarte.me/wallop
*
*/
(职能(全球){
功能冲击力(选择器、选项){
如果(!选择器){抛出新错误('缺少选择器)。请参阅使用说明文件:https://github.com/peduarte/wallop#javascript'); }
对于(变量i=0;i0&&!this.whitelist[selector]){
抛出新错误('选择器不能是数组,请参阅使用说明文件:https://github.com/peduarte/wallop#javascript');
}否则{
此.$selector=选择器;
}
this.options=extend(this.options,options);
this.event=null;
//“全局变量”
这是reset();
this.buttonPrevious=this.$selector.querySelector(“..”+this.options.buttonPrevious类);
this.buttonNext=this.$selector.querySelector('.'+this.options.buttonNext类);
这是bindEvents();
这个.createCustomEvent();
//如果没有活动项,则从0开始
if(this.currentItemIndex==-1){
this.currentItemIndex=0;
addClass(this.allItemsArray[this.currentItemIndex],this.options.currentItemClass);
}
//更新按钮状态,以确保在初始化时设置了正确的状态
this.updateButtonStates();
//包装在超时函数中,因此事件可以
//随时都可以从外面听到
var_this=这个;
setTimeout(函数(){
_this.event.detail.currentItemIndex=\u this.currentItemIndex;
_this.$selector.dispatchEvent(_this.event);
}, 0);
}
var selectorPool=[];
var WS=冲击力原型;
//更新上一个/下一个禁用属性
WS.updateButtonStates=函数(){
if((!this.buttonPrevious&&!this.buttonNext)| | this.options.carousel){return;}
if(this.currentItemIndex==this.lastItemIndex){
this.buttonNext.setAttribute('disabled','disabled');
}else if(this.currentItemIndex==0){
this.buttonPrevious.setAttribute('disabled','disabled');
}
};
//通过删除goTo()和updateButtonStates()添加的类和属性重置所有设置
WS.removeAllHelperSettings=函数(){
removeClass(this.allItemsArray[this.currentItemIndex],this.options.currentItemClass);
removeClass($$(this.options.hidePreviousClass,this.selector),this.options.hidePreviousClass);
removeClass($$(this.options.hideNextClass,this.selector),this.options.hideNextClass);
removeClass($$(this.options.showPreviousClass,this.selector),this.options.showPreviousClass);
removeClass($$(this.options.showNextClass,this.selector),this.options.showNextClass);
如果(!this.buttonPrevious&&!this.buttonNext){return;}
此.buttonPrevious.removeAttribute('disabled');
this.buttonNext.removeAttribute('disabled');
};
//方法根据传递的索引将类添加到正确的元素
WS.goTo=函数(索引){
如果(index==this.currentItemIndex){return;}
//如果索引超出范围并且已启用旋转木马,请修复索引
index=index==-1&&this.options.carousel?this.lastItemIndex:index;
index=index==this.lastItemIndex