我在这里感觉很愚蠢-我无法在jQuery中使用简单的类切换语句!在过去的45分钟里,我只能无奈地坐着,我一直在搜索Stack Overflow的问题和答案,但无济于事。

我的目标是,在单击带有colorClick ID(已经包含默认类别“白色”)的元素后,在分配该类别为绿色,黄色,橙色,红色和再次变回白色之间进行轮换(无限) 。

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>


链接到 fiddle :
http://jsfiddle.net/andrewcbailey89/4Lbm99v0/2/

最佳答案

首先,制作列表时,应使用正确的列表元素。您的“待办事项”列表适合描述列表(<dl>)的定义,因此您应该使用该列表而不是<div>元素。

通过摆脱类并创建颜色数组,您可以节省很多代码行。确保颜色与您希望它们显示的顺序相同。我们将使用此数组基于递增的计数器设置背景色。

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

您还可以使用“factory”函数来极大地简化脚本,该函数定义了作用域并构建了事件监听器函数,该函数将其返回。这为每个监听器函数创建了一个“安全”范围,因为我们可以定义将在事件之间存储信息的变量。

在以下代码段中,我们定义了一个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,以停止选择单击文本(这可能会很烦人),并将光标更改为指针,以使其具有更可操作的感觉。

这是完整的演示,我包括了多个任务列表以表明它可以完成。

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>

10-05 20:53
查看更多