0

私は表示/非表示のdiv JavaScript関数を持っています

スタイルではなくクラス名で動作するように変換したい

これは、変換したい私の関数です

<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...
}
4

3 に答える 3

3

少し話が逸れますが、jquery ライブラリを使用している場合はさらに簡単です。

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

jquery で何かが表示されているかどうかをテストするには:

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

もちろん、jquery を使用したくない理由もありますが、jquery には、このような作業を簡単にする便利なツールがいくつかあります。

于 2012-06-27T15:24:56.967 に答える
3

何よりもまず、CSS が無効です。クラスは を使用して CSS で定義されます。# ではありません。# の定義 ID は、ドキュメント内の 1 つの要素に対して常に一意です。一方、クラスは、その名前が示すように、多くのオブジェクトが可能なタイプのものです。ID は犬の名前「Fido」のようなもので、「Fido」という名前の犬は 1 匹だけ持つ必要があります。一方、クラスは犬の品種のようなもので、多くのコッカプーを持つことができますが、それぞれに一意の名前を付ける必要があります。この質問に対する他の回答では、CSS を修正できません。修正しないと機能しません。

 .hidden{
   display:none;
 }
 .shown{
   display:block;
 }

次に、JQuery などの JavaScript フレームワークを使用すると、作業がずっと楽になります。これは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');
           }
       }
    });
});

これを改善するために私がお勧めするもう 1 つのことは、display: block を使用して表示する代わりに、display:block は必ずしも単に「表示」と「非表示」を意味するわけではないため、その要素がどのように処理されるかについての情報を意味することです。表示に関しては、ブロック要素が必要に応じて空白を含む完全な高さ/幅として扱われることを意味します。特に明示的に設計されていない限り、その隣の HTML 要素は次の行に強制されます。代わりに、隠しクラスを削除するだけです。

于 2012-06-27T15:28:27.487 に答える
0

クラス名が存在するかどうかを確認することは、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-27T15:17:46.800 に答える