我在这里感觉非常愚蠢 – 我无法得到一个简单的类切换语句在jQuery中工作！我只能在最后45分钟的沮丧中,我搜索了Stack Overflow的问题和答案,无济于事.
我的目标是在使用colorClick id(已经包含默认类“white”)单击某个项目时,将该项目在被分配给绿色,黄色,橙色,红色和再次变为白色之前旋转(广告无限) .
CSS简单 – 每个类简单地对应于不同的背景颜色.
HTML很简单 – 一个带有两个CSS类的div标签(一个是静态的,一个由jQuery更改).
jQuery是简单的 – 读取点击的项目上的类,并更改它.
现在,你明白什么使我烦恼这是我到目前为止工作的：
$("#colorClick").click(function () {
if ($(this).hasClass('white')) {
$(this).removeClass("white").addClass("green");
} else if ($(this).hasClass('green')) {
$(this).removeClass('green').addClass('yellow');
} else if ($(this).hasClass('yellow')) {
$(this).removeClass('yellow').addClass('orange');
} else if ($(this).hasClass('orange')) {
$(this).removeClass('orange').addClass('red');
} else if ($(this).hasClass('red')) {
$(this).removeClass('red').addClass('white');
});
.toDoItem {
text-align: left;
padding: 3px;
margin-bottom: 5px;
border: 1px solid;
border-color: #e8e7e7;
}
.white {
background-color: #ffffff;
}
.green {
background-color: #b2d8b2;
}
.yellow {
background-color: #ffffb2;
}
.orange {
background-color: #ffe4b2;
}
.red {
background-color: #ffb2b2;
}
<div class="toDoItem white" id="colorClick">To-do list item</div> <div class="toDoItem white" id="colorClick">To-do list item</div> <div class="toDoItem white" id="colorClick">To-do list item</div>
解决方法
首先,在列出列表时,应该使用正确的列表元素.您的“待办事项”列表符合描述列表(< dl>)的定义,因此您应该使用该列表而不是< div>元素.
您可以通过摆脱类并创建一系列颜色来节省大量的代码.确保颜色的顺序与您希望显示的颜色相同.我们将使用此数组来设置基于递增计数器的背景颜色.
var colors = ['#b2d8b2','#ffffb2','#ffe4b2','#ffb2b2','#fff'];
您还可以通过使用“工厂”函数大大简化脚本,该函数定义范围并构建事件侦听器函数,返回它.这为每个监听器函数创建一个“安全”范围,因为我们可以定义将在事件之间存储信息的变量.
在下面的代码段中,我们定义了每次点击增加的count变量.当使用模运算符％除以颜色数组的长度时,我们使用递增的变量余数.如果数字小于数组的长度,它将返回数字,否则返回余数除以数组的长度,使我们可以连续循环.
function todoItemListener() {
var count = 0;
return function () {
$(this).css({ 'background-color': colors[count++ % colors.length] });
}
}
然后,而不是按照正常的方式分配函数声明(没有括号),我们分配工厂函数的结果,只需要附加括号,函数就会执行并返回生成的监听器函数.这允许我们添加尽可能多的监听器函数,所以如果要添加新的todo列表项,我们可以简单地构建另一个监听器函数.
$('.todo-list dd').each(function () {
$(this).on('click',todoItemListener());
});
$('.add-item').on('click',function () {
var list = this.parentNode.parentNode;
$('<dd>To-do list item</dd>').appendTo(list).on('click',todoItemListener());
});
这种方法还允许您随意轻松地更改颜色数组.所以说如果一个选项在页面上的某个地方被选中,那么另一种颜色可能会变得可用或不可用.
另外,对于一些额外的UX的好处,我添加了CSS来停止点击文本的选择(可能会令人讨厌),并将光标更改为一个指针,使其具有更可操作的感觉.
这是完整的演示,我已经包括了多个待办事项列表来显示它可以完成.
var colors = ['#b2d8b2','#fff'];
function todoItemListener() {
var count = 0;
return function () {
$(this).css({ 'background-color': colors[count++ % colors.length] });
}
}
$('.todo-list dd').each(function () {
$(this).on('click',todoItemListener());
});
.glyphicon-plus-sign {
font-size: 15px;
}
.todo-list {
background: #efefef;
padding: 3px;
}
.todo-list dd {
margin: 0;
text-align: left;
padding: 3px;
margin-bottom: 7px;
border: 1px solid;
border-color: #e8e7e7;
background-color: #fff;
}
.add-item,.todo-list dd {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}
.add-item {
float: right;
margin: 4px;
}
.todo-list dh::after {
content: "";
display: block;
clear: both;
}
.todo-list dh h3 {
float: left;
margin: 0px;
max-width: 100%;
overflow: hidden;
}
/* This rule is for the demo only */
.wrp {
float: left;
width: 33.33333333%;
padding: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="wrp">
<dl class="todo-list" id="todo-list-1">
<dh>
<h3 class="center" contenteditable>To Do List 1</h3>
<span class="add-item glyphicon glyphicon-plus-sign"></span>
</dh>
<dd>To-do list item</dd>
<dd>To-do list item</dd>
<dd>To-do list item</dd>
</dl>
</div>
<div class="wrp">
<dl class="todo-list" id="todo-list-2">
<dh>
<h3 class="center">To Do List 2</h3>
<span class="add-item glyphicon glyphicon-plus-sign"></span>
</dh>
<dd>To-do list item</dd>
<dd>To-do list item</dd>
<dd>To-do list item</dd>
</dl>
</div>
<div class="wrp">
<dl class="todo-list" id="todo-list-3">
<dh>
<h3 class="center">To Do List 3</h3>
<span class="add-item glyphicon glyphicon-plus-sign"></span>
</dh>
<dd>To-do list item</dd>
<dd>To-do list item</dd>
<dd>To-do list item</dd>
</dl>
</div>
