Question

我在这里感觉非常愚蠢 - 我无法在jQuery中使用简单的类切换语句！我只能坐在最后45分钟的沮丧中，我搜索了Stack Overflow的问题和答案，但没有用。

我的目标是，在点击具有colorClick id（已经包含默认类“white”）的项目时，在指定了绿色，黄色，橙色，红色和再次返回白色之间旋转该项目（ ad infinitum）。

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>

链接到小提琴： http://jsfiddle.net/andrewcbailey89/4Lbm99v0/2/

Answer 1

首先，在制作列表时，您应该使用正确的列表元素。你的待办事项＆＃34; list符合描述列表（<dl>）的定义，因此您应该使用该列表而不是<div>元素。

通过删除类并创建颜色数组，可以节省大量代码。确保颜色与您希望它们显示的顺序相同。我们将使用此数组根据递增的计数器设置背景颜色。

var colors = ['#b2d8b2', '#ffffb2', '#ffe4b2', '#ffb2b2', '#fff'];

您还可以使用＆＃34;工厂＆＃34;来大大简化您的脚本。函数，它定义一个范围并构建一个它返回的事件监听器函数。这创造了一个安全的＆＃34;每个侦听器函数驻留的范围，我们可以定义将在事件之间存储信息的变量。

在下面的代码段中，我们定义了一个count变量，我们在每次点击时都会增加该变量。当使用模运算符%除以颜色数组的长度时，我们使用递增的变量余数。如果数字小于数组的长度，它将返回数字，否则它将在除以数组的长度时返回余数，允许我们连续循环。

function todoItemListener() {
    var count = 0;
    return function () {
        $(this).css({ 'background-color': colors[count++ % colors.length] });
    }
}

然后我们不是正常地指定函数声明（没有括号），而是分配工厂函数的结果，只需附加括号，函数将执行并返回结果的监听器函数。这允许我们添加任意数量的侦听器函数，因此如果您要添加新的待办事项列表项，我们可以简单地构建另一个侦听器函数。

$('.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以停止在单击时选择文本（这可能会令人讨厌）并将光标更改为指针以使其具有更可操作的感觉。

这是完整的演示，我已经包含多个待办事项列表，以表明可以完成。

＆＃13;

var colors = ['#b2d8b2', '#ffffb2', '#ffe4b2', '#ffb2b2', '#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());
});

$('.add-item').on('click', function () {
    var list = this.parentNode.parentNode;
    $('<dd>To-do list item</dd>').appendTo(list).on('click', todoItemListener());
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您在一些地方遗漏了一些引号，并且您没有关闭最后一条if语句。

例如：$(this).hasClass(green)应为$(this).hasClass('green')

此外，您应该将colorClick更改为类而不是ID，因为这些元素中有多个。

为了一致性，我还将所有引号都改为单引号。

这是一个工作片段：

＆＃13;

$(".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');    
    }
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorClick toDoItem white">To-do list item</div>
<div class="colorClick toDoItem white">To-do list item</div>
<div class="colorClick toDoItem white">To-do list item</div>

＆＃13;

Answer 3

首先，您对多个元素使用相同的id。 id对每个元素都应该是唯一的。您可以使用toDoItem class代替colorClick id来绑定点击事件。要删除复杂的if else语句，可以将所有class放入所需序列的数组中。然后根据数组的顺序点击toDoItem更改class。如果你到达阵列的最后一项，那么就回到第一位。

＆＃13;

var colors = ['white', 'green', 'yellow', 'orange', 'red'];
var total = colors.length-1;

$(".toDoItem").click(function() {
    var color = $(this).attr('class').split(' ')[1];
    var index = colors.indexOf(color);
    index = index==total? 0 : index+1;
    
    $(this).removeClass(color).addClass(colors[index]);
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toDoItem white">To-do list item</div>
<div class="toDoItem white">To-do list item</div>
<div class="toDoItem white">To-do list item</div>

＆＃13;

在点击事件时使用jQuery在类之间交替

3 个答案:

JS FIDDLE DEMO