Jquery 每次单击时切换addClass

我有一个元素，每次单击都要附加它。每次它附加了，我都希望它有一个特定的类。 例如：我单击一次，它会附加一个

class=“odd”

，再次单击会出现一个

class=“偶数”

元素。 所以最终它看起来会像

class="odd"
class="even"
class="odd"
class="even"
etc.

var clicks=0；
$（'li'）。在（'click'，函数（）{
var元素=“”；
//每单击一次，它应该更改addClass
如果（单击%2==0）{//请检查偶数
$（this.append（$（element.addClass（'even'））；
}否则{
$（this.append（$（element.addClass（'odd'））；
}
点击++；
});

---

如果需要从特定列表项中的div数开始，它会变得更复杂一些，但不会太多。

我假设切换是针对每个

元素的，而不是针对每次单击。由于起始类可能并不总是“奇数”，因此您需要在单击的
中获取最后一个后代
元素，如下所示：

var last = $(this).find('div.odd, div.even').last();


有几种方法可以让你写出同样的句子。您可以使用'div'作为选择器（即，
$（this）.find（'div'）.last（）
）。您可以使用
.children（）
而不是
.find（）
在
元素中只查找一个级别

所以，如果有许多变体最终是等效的，为什么我要选择那个呢？它对DOM结构的潜在更改最具弹性。如果在
和那些
元素之间添加另一个包装元素，
.children（）
将无法工作（尽管您还必须去修复附加新元素的行）。如果您有其他不想计数的
元素，那么仅使用'div'作为选择器也不起作用


然后通过检查新元素是否有“奇数”类来确定新元素应该有哪个类——如果有，新元素需要“偶数”类；否则，它需要“奇数”

var c = last.hasClass('odd') ? 'even' : 'odd';
$(this).append($(element).addClass(c));

我想这正是你想要的：

$('li').on('click', function () {
    var element = '<div></div>';
    var newClass = ($(this).find('div:last').attr('class')=='odd')?'even':'odd';
    $(this).append($(element).addClass(newClass)); // per click it should change the addClass
});

$（'li'）。在（'click'，函数（）{
var元素=“”；
var newClass=（$（this）.find（'div:last'）.attr（'class'）='odd'）？'偶数'：'odd'；
$（this）.append（$（element）.addClass（newClass））；//每次单击都应更改addClass
});

这适用于您的JSFIDLE：

$('li').on('click', function(){
    var currentClass = $(this).children().last().attr('class');
    var setClass = (currentClass === "odd") ? "even" : "odd";
    var $div = $('<div class="'+setClass+'"/>');
    $(this).append($div); // per click it should change the addClass
});

$（'li'）。在（'click'，function（）上{
var currentClass=$（this.children（）.last（）.attr（'class'）；
变量setClass=（currentClass==“奇数”）？“偶数”：“奇数”；
变量$div=$（''）；
$（this）.append（$div）；//每次单击它都应该更改addClass
});
哇，太快了。正是我要找的！谢谢你，8分钟后我会检查这个作为答案点击的“范围”应该是每个
li
元素，否则，你可能会弄乱交替顺序。这就是我的结束评论所指的，但OP没有表明这是一个问题。你可能还对，它也接受关键字
偶数
和
奇数
作为参数。@NicoO您是否建议他们放弃jQuery以确定需要哪个类，而只使用CSS选择器来处理适当的着色？（因为如果是这样，那真是个好主意。）@AnthonyGrist根据实际用例：是。@nico这是你的建议只是为了好玩：@technophobia这是一个非常聪明的解决方案，很好：）你的答案非常接近，但是你的
mod
2有缺陷，因为它没有检查第一个元素的状态。如果这个问题得到解决，这可能是最好的答案。我有点希望它总是以
odd
开头，但在演示中实际情况并非如此。更新了我的答案以检查最后一个子元素具有哪些类。您还可以将对
last
的查询简化为
$（this）。find（'div'）。last（）
，但逻辑非常合理。更新：没关系，看起来你很安全。明智。@technophobia我在最初的回答中有一条关于这一点的注释，我删除了它。我担心其他
元素（可能在奇数或偶数div中）可能会抛出一些东西。这实际上可能不是一个问题，但它并不影响安全。如果元素上有其他类（即
class
属性不仅仅是字符串“odd”），则这将中断。最好使用
.hasClass（）
检查该类是否存在。
$('li').on('click', function(){
    var currentClass = $(this).children().last().attr('class');
    var setClass = (currentClass === "odd") ? "even" : "odd";
    var $div = $('<div class="'+setClass+'"/>');
    $(this).append($div); // per click it should change the addClass
});