顯示/隱藏DIV基於類名

我有一個顯示/隱藏DIV JavaScript函數顯示/隱藏DIV基於類名

我想將它轉換與類名，而不是風格

工作這是我的職責，我想將其轉換

<script> 
function toggle(e, id) { 
    var el = document.getElementById(id); 
    el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none'; 
    toggle.el = el; 
    if (e.stopPropagation) e.stopPropagation(); 
    e.cancelBubble = true; 
    return false; 
} 
document.onclick = function() { 
    if (toggle.el) { 
     toggle.el.style.display = 'none'; 
    } 
} 
</script>

我想將它轉換與類名的工作，

例如：

#hidden{ 
display:none; 
} 
#shown{ 
display:block; 
} 
function toggle(e,id){ 
if(el.class=='hidden'){ 
el.setAttribute("class", "showen"); 
} 
//etc... 
}

來源

2012-06-27 Alaa Gamal

在className中檢查類名的存在並不像人們想象的那樣直截了當。下面的文章有這樣的一個極好的說明，包括自定義函數：hasClassName()

function hasClass(el, class_to_match) { 
    if (el && el.className && typeof class_to_match === "string") { 
     var c = el.getAttribute("class"); 
     c = " " + c + " "; 
     return c.indexOf(" " + class_to_match + " ") > -1; 
    } 
    else { 
     return false; 
    } 
}

然後，您只需更新toggle功能：

function toggle(el, id) { 
    if (hasClassName(el, 'hidden')) { 
    el.setAttribute("class", "showen"); 
    } 
}

注：我不主張使用這樣一個Javascript框架/庫，如果你經常做這樣的事情。但是如果切換元素的顯示只是你做的事情，那麼我認爲它們是過度殺傷性的。

來源

2012-06-27 15:17:46

這不起作用http://jsfiddle.net/th57e/1/ –

您需要包含我引用的函數。請參閱更新以獲得更多清晰。 –

有點偏離主題，但如果您使用jQuery庫，這更容易。

$(".yourclass").hide(); 
$(".yourclass").show();

要測試如果事情是用jQuery顯示：

if ($(".yourclass").is(":visible"))

顯然還有你可能不希望使用jQuery是原因，但它有一些漂亮的工具，使這樣的事情更容易。

來源

2012-06-27 15:24:56 sylverfyre

首先您的CSS無效，類在CSS中使用定義。並不是＃。＃的定義ID，它對文檔中的一個元素始終是唯一的。另一方面，類正如名字所暗示的那樣，是許多對象可能存在的一種類型。身份證就像一隻狗「Fido」的名字，你應該只有一隻名爲「Fido」的狗，而一個階級就像一隻狗的品種，你可以擁有很多cockapoos，但每個犬隻都必須有一個獨特的名字。這個問題的其他答案不能糾正你的CSS，如果你不糾正這個問題，它將無法工作。其次，如果你使用JavaScript框架，比如JQuery，它會讓你的生活變得容易很多。下面是使用JQuery寫同樣的事情（jQuery庫包括省略）

$(document).click(function() { 
    var toggleElements = $(".toggleMe"); 
    $.each(toggleElements, function (key, value) { 
     if (value.hasClass('hidden')) { 
      value.removeClass('hidden'); 
      value.addClass('shown'); 
     } else { 
      if (value.hasClass('shown')) { 
       value.removeClass('shown'); 
       value.addClass('hidden'); 
      } 
     } 
    }); 
});

我建議，以改善這個其他的事情將是，而不是使用顯示：塊顯示，由於顯示：塊不必然意味着簡單地「顯示」與「隱藏」，它隱含了關於該元素如何在顯示方面進行處理的信息，這意味着塊元素被視爲具有空白的完整高度/寬度，而不管是什麼和任何HTML元素除非另有明確規定，否則在它旁邊被強制到下一行。你應該做的只是去掉隱藏的類。

來源

2012-06-27 15:28:27 hsanders

感謝您的大有用答案，我使用類的原因，我希望你的代碼在JavaScript中，因爲我不使用jQuery –

@AlaaGamal有很多很好的理由使用它。其他答案包括addClass，hasClass和removeClass的實現，只需使用JQuery就可以實現冗餘。顯然你有你自己的理由，但我會考慮研究JQuery。此外，我的答案中與JQuery無關的其餘部分仍然適用，因爲您濫用display：block，並且您濫用ID而不是類。 – hsanders

顯示/隱藏DIV基於類名

回答

相關問題