Question

我想换一个类，但是有一个循环。当你点击棕色方块时，他在蓝色方块上移动，蓝色方块现在位于棕色方块的位置

还有更多他可以移动无限。我希望你理解这个问题，我发布了我的代码的开头

7fdfaf931000-7fdfaf932000 r--p 0007a000 08:07 655633                     /usr/lib/x86_64-linux-gnu/libQt5DBus.so.5.5.1
7fdfaf932000-7fdfaf933000 rw-p 0007b000 08:07 655633                     /usr/lib/x86_64-linux-gnu/libQt5DBus.so.5.5.1
7fdfaf933000-7fdfaf934000 rw-p 00000000 00:00 0 
7fdfaf934000-7fdfaf971000 r-xp 00000000 08:07 667112                     /usr/lib/x86_64-linux-gnu/libxkbcommon.so.0.0.0
7fdfaf971000-7fdfafb70000 ---p 0003d000 08:07 667112                     /usr/lib/x86_64-linux-gnu/libxkbcommon.so.0.0.0
7fdfafb70000-7fdfafb72000 r--p 0003c000 08:07 667112                     /usr/lib/x86_64-linux-gnu/libxkbcommon.so.0.0.0
7fdfafb72000-7fdfafb73000 rw-p 0003e000 08:07 667112                     /usr/lib/x86_64-linux-gnu/libxkbcommon.so.0.0.0
7fdfafb73000-7fdfafb7a000 r-xp 00000000 08:07 667110                     /usr/lib/x86_64-linux-gnu/libxkbcommon-x11.so.0.0.0
7fdfafb7a000-7fdfafd79000 ---p 00007000 08:07 667110                     /usr/lib/x86_64-linux-gnu/libxkbcommon-x11.so.0.0.0

Answer 1

使用querySelectorAll和forEach循环以及classList.toggle

var things = document.querySelectorAll(".board li.champagne,.board li.braken");
[].forEach.call(things, function(thing) {
    thing.addEventListener('click', function() {
        thing.classList.toggle('champagne');
        thing.classList.toggle('braken');
    });
});

注意，最终所有浏览器都赶上了，或者使用正确的polyfill - 你可以做到

document.querySelectorAll(".board li.champagne,.board li.braken")
.forEach(function(thing) {
    thing.addEventListener('click', function() {
        thing.classList.toggle('champagne');
        thing.classList.toggle('braken');
    });
});

＆＃34;填充工具＆＃34; - 只要浏览器有Array.prototype.forEach

NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;

Array.prototype.forEach的“填充”为here

Answer 2

使用this作为事件处理程序中元素的引用;致电.removeEventListener()和.addEventListener()切换反映.className元素this更改的事件处理程序。

＆＃13;

var braken = document.querySelector(".board li.braken");
var champagne = document.querySelector(".board li.champagne");

function b() {
  this.classList.remove("braken")
  this.classList.add("champagne");
  this.removeEventListener("click", b);
  this.addEventListener("click", c);
}

function c() {
  this.classList.remove("champagne");
  this.classList.add("braken");
  this.removeEventListener("click", c);
  this.addEventListener("click", b);
}

braken.addEventListener("click", b);
champagne.addEventListener("click", c);

＆＃13;

.braken {
  color: blue;
}

.champagne {
  color: brown;
}

＆＃13;

<ul class="board">
  <li class="braken">bracken</li>
  <li class="champagne">champagne</li>
</ul>

＆＃13;

Answer 3

我认为我错过了，

我找到了解决方案。

var braken = document.querySelector(".board li.braken");
    var champagne = document.querySelector(".board li.champagne");

    var toggle = function (li) {

        if(li.className === "champagne") {
            li.className = "braken"
        }else {
            li.className = "champagne"
        }

    }


    braken.addEventListener("click", function () {
        toggle(braken)
        toggle(champagne)
    })
    champagne.addEventListener("click", function () {
        toggle(braken)
        toggle(champagne)
    })

用纯JavaScript交换一个类

3 个答案: