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

Question

我在这里感觉非常愚蠢 - 我无法让一个简单的 class 切换语句在 jQuery 中工作！最后45分钟，我只能郁闷地坐着，我搜索了Stack Overflow的问题和答案，无济于事。

我的目标是，在单击具有 colorClick id（已经包含 "white" 的默认 class）的项目时，在分配给 class 绿色之间旋转该项目，黄色、橙色、红色，然后再次变回白色（无限次）。

CSS 很简单 - 每个 class 只对应一种不同的背景颜色。

HTML 很简单——一个 div 标签有两个 CSS classes（一个是静态的，一个被 jQuery 改变）。

jQuery 很简单 - 读取单击项目上的 class，然后更改它。

现在，你明白是什么让我烦恼了。到目前为止，这是我正在处理的内容：

$("#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>

Link 到 fiddle： http://jsfiddle.net/andrewcbailey89/4Lbm99v0/2/

Answer 1

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

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

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

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

这是一个工作片段：

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

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

Answer 2

首先，在制作列表时，您应该使用正确的列表元素。您的 "To Do" 列表符合描述列表 (<dl>) 的定义，因此您应该使用它而不是 <div> 元素。

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

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

您还可以通过使用 "factory" 函数来大大简化您的脚本，该函数定义范围并构建事件侦听器函数，它 returns。这为每个侦听器函数创建了一个 "safe" 范围，我们可以定义变量来存储事件之间的信息。

在下面的代码片段中，我们定义了一个 count 变量，我们会在每次点击时递增该变量。在使用取模运算符 % 除以颜色数组的长度时，我们使用增量变量余数。如果数字小于数组长度，则return数字，否则return除以数组长度的余数，让我们不断循环。

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

然后，我们不再像往常一样分配函数声明（不带括号），而是分配工厂函数的结果，只需附加括号，函数就会执行，return 生成监听器函数。这允许我们添加任意数量的侦听器函数，因此如果您要添加新的待办事项列表项，我们可以简单地构建另一个侦听器函数。

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

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

Answer 3

首先，您对多个元素使用相同的 id。 id 每个元素都应该是唯一的。您可以使用 toDoItem class 而不是 colorClick id 来绑定点击事件。要摆脱复杂的 if else 语句，您可以将所有 class 按所需顺序放入数组中。然后点击 toDoItem 根据数组的顺序更改 class。如果您到达数组的最后一项，则返回到第一项。

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]);
});

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

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

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

Using jQuery to alternate between classes upon click event

javascript

jquery

css

addclass

removeclass

JS FIDDLE DEMO

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

Using jQuery to alternate between classes upon click event

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