Question

我有一个我希望每次点击附加的元素。每次附加我都希望它有一个特定的类。例如：我点击一次，它会附加class="odd"，再次点击会有一个class="even"的元素。所以最后它看起来像

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

http://jsfiddle.net/1360v7gn/

Answer 1

c0.7.1

<强> Demo

如果你需要从特定列表项中的div数开始，那会更复杂一些，但不是很多。

Answer 2

我认为切换是按<li>元素，而不是每次点击。由于起始课程可能并不总是“奇怪”，因此您希望获得<div>中被点击的最后一个后代<li>元素，如下所示：< / p>

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

您可以通过几种方式编写该行，它们的工作方式相同。你可以使用＆＃39; div＆＃39;作为选择器（即$(this).find('div').last()）。您可以使用.children()代替.find()来仅查看<li>元素中的一个级别。

因此，如果有许多变体最终相同，那我为什么选择那个呢？它对DOM结构的潜在变化最具弹性。如果您在<li>和那些<div>元素之间添加另一个换行元素，.children()将不起作用（尽管您还必须去修复附加的行）新元素）。如果您有其他<div>元素，您不想计算，只需使用＆＃39; div＆＃39;因为选择器也不会起作用。

然后通过检查新元素是否具有“奇数”来确定新元素应该具有哪个类。 class - 如果是的话，新元素需要＆＃39; even＆＃39;类;否则，它需要＆＃39; odd＆＃39;。

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

Updated fiddle

Answer 3

这适用于你的jsfiddle：

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

Answer 4

我认为这可以做你想要的：

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

<强> jsFiddle example

每次点击切换addClass

4 个答案: