Удалить класс при добавлении класса в другой элемент

Question

У меня есть длинный список элементов изображения, каждый со своим собственным идентификатором. Я уже настроил его так, что, щелкнув по одному изображению, он переключит класс «foo». Что бы я хотел сделать, это настроить его так, чтобы при нажатии на другое изображение первый класс изображения «foo» будет удален. Я бы хотел сделать это с помощью чистого javascript, если это возможно. Спасибо.

Вот скрипку: http://jsfiddle.net/q3aRC/

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

Answer 1

Я хотел бы предложить, учитывая, что вы уже используете classList апи:

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.

Ссылки:

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

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/

То есть, связать один обработчик щелчка к документу (или вы могли бы связать с родительским элементом изображения, если они ша re the common parent), а затем при тестировании кликов, если щелкнутый элемент является одним из элементов, которые вас интересуют (то есть img) и оттуда ... JS заканчивается примерно такой же длины, но html заканчивается короче и аккуратно. Вы также можете удалить атрибут id, если вы не использовали его для чего-либо другого, кроме вашей исходной функции clicked().

Я использовал getElementsByTagName(), чтобы показать вам еще один способ сделать это, но getElementsByClassName() или querySelectorAll() (как и в других ответах), вероятно, являются лучшими вариантами. Но это простой способ сделать.