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 Fiddle demo

参考文献：

Answer 2

我会为所有图像添加一个公共类，并从所有图像中删除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');
}

Answer 3

由于您已经在使用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()（与其他答案一样）可能是更好的选择。但这是一个简单的转换。

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

3 个答案: