Как поменять два класса на каждом элементе в HTML странице

Question

У меня есть следующий CSS на моей HTML странице:

<style type="text/css"> 
    .hidden   {display:none;} 
    .visible   {display:block;} 
</style> 

И почти каждый, и на странице принадлежит к одной или другой из этих стилей CSS. Мне нужно, чтобы javascript менял все на противоположное число ... т. Е. каждый скрытый становится видимым и наоборот.

Я использовал что-то подобное в более раннем проекте, но это только позволяет мне поменять одну вещь за раз и заставляет меня указывать ее идентификатор напрямую. Мне нужен глобальный сценарий «если видимый» - сменить на скрытый - и наоборот ».

код (который я пытался и не расширить, чтобы это поведение) ниже:

<script type="text/javascript"> 
    function toggle(divID) {var item = document.getElementById(divID); if (item) {item.className=(item.className=='hidden')?'visible':'hidden';}} 
</script> 

Любые идеи?

Answer 1

<style type="text/css"> 
.hidden   {display:none;} 
.visible   {display:block;} 
.temp   {display:none;} 
</style> 

function swap() { 
$('.hidden').removeClass('hidden').addClass('temp'); 
$('.visible').removeClass('visible').addClass('hidden'); 
$('.temp').removeClass('temp').addClass('visible'); 
} 

Answer 2

Просто используйте JQuery

$('.hidden').removeClass('.hidden').addClass('.visible');