Question

我正在尝试更改div的属性类。我有三个已定义的类，并希望在用户启动click事件时循环遍历这些类。第一次单击事件按预期工作，但第二次没有显示任何结果。

我经历了几次迭代尝试让它发挥作用，但没有取得任何成功。我认为发生的事情是DOM树没有使用click事件进行更新，因此当第二次单击事件被触发时，它会看到card-green类，添加card-yellow类然后退出分支逻辑。

$(document).ready(function() {
  $('body').on('click', function(event) {
    var cardColors = ['card-green', 'card-yellow', 'card-red'];
    if ($(event.target.nodeName).attr('class') == 'card-green') {
      $(event.target.nodeName).removeClass(event.target.nodeName.className).addClass(cardColors[1]);
    } else if ($(this).attr('class') == 'card-yellow') {
      $(event.target.nodeName).removeClass(event.target.nodeName.className).addClass(cardColors[2]);
    } else {
      $(event.target.nodeName).removeClass(event.target.nodeName.className).addClass(cardColors[0]);
    }
  })
});

Answer 1

当点击文档cards中的元素时，这将按body数组的顺序更改颜色：

（非常类似于@ gyre的答案，只包含代码逻辑中的event.target，而不仅仅是body）。

＆＃13;

var cards = ['card-green', 'card-yellow', 'card-red'];

$('body').on('click', function() {

  var elem = event.target,
    curClass = $(elem).attr('class'),
    i = cards.indexOf($(elem).attr('class'));

  $(elem)
    .removeClass(curClass)
    .addClass(cards[i = (i + 1) % cards.length]);
});

＆＃13;

div {
  height: 100px;
  width: 100px;
  display: inline-block;
}

.card-green {
  background-color: green;
}

.card-yellow {
  background-color: yellow;
}

.card-red {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" class="card-green"></div>
<div id="bar" class="card-yellow"></div>
<div id="baz" class="card-red"></div>

＆＃13;

Answer 2

使用switch和toggleClass()。详细信息在Snippet中进行了注释。如果使用有限数量的选项，则无需阵列。使用$(this)时，您无需跟踪所点击的内容（很像event.target except $(this)不关心事件，因为它与功能所有者有关。）

<强>段

$(document).ready(function() {
  $(document).on('click', 'div', function(event) {
    /* Determine $(this) class
    || Pass class through the switch
    */
    var color = $(this).attr('class');
    /* Each part of the switch is a if/else 
    || conditional. If the condition isn't 
    || met, then it will kick you
    || down to the next conditional and
    || so on, until you reach default or
    || meet a condition in which case the
    || break will kick you out of switch.
    || Each condition has a toggleClass()
    || method to switch colors according
    || to the present class of div
    */
    switch (color) {
      case 'green':
        $(this).toggleClass('green yellow');
        break;
      case 'yellow':
        $(this).toggleClass('yellow red');
        break;
      case 'red':
        $(this).toggleClass('red green');
        break;
      default:
        break;
    }

  });
});

div {
  height: 30px;
  width: 50px;
  border: 1px solid black;
  cursor: pointer;
}

.green {
  background: green
}

.red {
  background: red;
}

.yellow {
  background: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='green'></div>
<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

<div class='green'></div>

Answer 3

使用额外的索引变量来跟踪数组中的位置：

演示片段：

$(document).ready(function() {

  var cardColors = ['card-green', 'card-yellow', 'card-red']

  var i = 0

  $('body').on('click', function() {
    
    $(this)
      .removeClass(cardColors[i])
      .addClass(cardColors[i = (i + 1) % cardColors.length])
  })
})

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.card-green { background-color: green; }

.card-yellow { background-color: yellow; }

.card-red { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

相同的代码是可行的，只需从removeClass（event.target.nodeName.className）中删除nodeName，而不是使用removeClass（event.target.className）。试试这个，它为我工作。

$(document).ready(function() {
  $('body').on('click', function(event) {
    var cardColors = ['card-green', 'card-yellow', 'card-red'];
    alert(event.target.className)
    if ($(event.target.nodeName).attr('class') == 'card-green') {
      $(event.target.nodeName).removeClass(event.target.className).addClass(cardColors[1]);
    } else if ($(this).attr('class') == 'card-yellow') {
      $(event.target.nodeName).removeClass(event.target.className).addClass(cardColors[2]);
    } else {
      $(event.target.nodeName).removeClass(event.target.className).addClass(cardColors[0]);
    }
  })
});

使用jQuery删除（和添加）类到HTML元素，同时更新DOM树

4 个答案:

演示片段：