javascript - 将类添加到另一个元素时删除类

Question

我有一长串图像元素，每个元素都有自己的 ID。我已经设置好了，当你点击一张图片时，它会切换一个类“foo”。我想做的是设置它，以便当您单击另一个图像时，将删除第一个图像的类“foo”。如果可能的话，我想用纯 javascript 来做这件事。谢谢。

这是一个小提琴：http: //jsfiddle.net/q3aRC/

function clicked($id) {
    document.getElementById($id).classList.toggle('foo');
}

Answer 1

classList鉴于您已经在使用api ，我建议您：

function clicked($id) {
    // get all the elements with the class-name of 'foo':
    var others = document.querySelectorAll('.foo');
    // if there *are* any elements with that class-name:
    if (others.length){
        // iterate through that collection, removing the class-name:
        for (var i = 0, len = others.length; i < len; i++){
            others[i].classList.remove('foo');
        }
    }
    /* add the class-name back (if it already had the class-name
       we removed it in the previous section): */
    document.getElementById($id).classList.add('foo');
}

JS 小提琴演示。

参考：

• document.querySelectorAll().
• element.classList.

Answer 2

由于您已经在使用，classList我假设您只迎合足够新的浏览器addEventListener()，所以我建议删除所有onclick属性并执行以下操作：

document.addEventListener('click',function(e){
    if (e.target.tagName === "IMG") {
        var imgs = document.getElementsByTagName('IMG');
        for (var i = 0; i < imgs.length; i++)
            if (imgs[i] != e.target)
                imgs[i].classList.remove('foo');

        e.target.classList.toggle('foo');
    }
}, false);

演示：http: //jsfiddle.net/q3aRC/3/

也就是说，将单击处理程序绑定到文档（或者如果它们共享一个共同的父元素，您可以绑定到图像的父元素），然后单击测试是否单击的项目是您关心的元素之一（即, 一个 img) 并从那里开始...... JS 的长度大致相同，但 html 的长度更短且更整洁。id如果您没有将其用于原始clicked()功能以外的任何其他用途，您实际上也可以删除该属性。

我曾经getElementsByTagName()只是向您展示另一种方法，但是getElementsByClassName()或querySelectorAll()（如其他答案）可能是更好的选择。但这是一个简单的转换。

Answer 3

我会为所有图像添加一个公共类，并foo从所有图像中删除该类。然后我会将类添加到特定图像

function clicked(id){
  var images = document.getElementsByClassName('images');
  for (var i = 0; i < images.length; ++i) {
    images[i].classList.remove('foo');
  }

  document.getElementById(id).classList.add('foo');
}