Java Scriptで同じクラスのすべてのタグを表示/非表示にする方法は？

HTMLドキュメントに特定のクラス（t1、t2、またはt3）を持つすべてのspanタグを表示/非表示するjavascrit関数が必要です。例：Java Scriptで同じクラスのすべてのタグを表示/非表示にする方法は？

<script type="text/javascript"> 
<!-- 
    function sh(t){//show_hide(text number class) 
     //??? 
    } 
//--> 
</script> 

<div id='C'> 
<p> 
    <span class="P"> 
    Normal allways visible text. 
    <span class="t1">Text 1</span> 
    <span class="t2">Text 2</span> 
    <span class="t3">Text 3</span> 
    Normal allways visible text. 
    </span> 
</p> 
<p> 
    <span class="P"> 
    Normal allways visible text. 
    <span class="t1">Text 1</span> 
    <span class="t2">Text 2</span> 
    <span class="t3">Text 3</span> 
    Normal (allways visible text. 
    </span> 
</p> 
<p><span>Normal allways visible text.</span></p> 
</div>

機能SH（表示非表示）、このようtrigerredすることができる：

<p>Show: <a href="#" onclick="sh('t1');">text 1</a> | <a href="#" onclick="sh(t2);">text 2</a> | <a href="#" onclick="sh(t3);">text 3</a></p>

重要な詳細は、そのスパンクラスT1が表示され、他のすべてのスパンクラスT2およびT3隠されています。デフォルトでは、すべてのスパンクラスt1が最初のロード時に表示されます。

ありがとうございました。

人々はすでに私が必要としているものを手に入れました。

ピュアJavascriptを：：2つの解決策があります http://jsfiddle.net/4DREQ/

のjQueryの助けを借りて： http://jsfiddle.net/v3vWM/3/

出典

2011-01-14 Roger

に含める、私はt1があるとき、それは、唯一のことは、何か他のもの – qwertymk

あなたは直接JavaScriptでスタイル定義を変更することができます。それは少し厄介ですし、異なるブラウザ上でそれを確認する必要がありますが、それは次のようになります。

function findRule(selectorText) 
{ 
    for(var i=0; i<document.styleSheets.length; i++) 
    { 
     // IE uses "rules", all other browsers use "cssRules". 
     var rules = document.styleSheets[i].cssRules || document.styleSheets[i].rules; 

     for(var j=0; j<rules.length; j++) 
     { 
      if(rules[j].selectorText == selectorText) 
       return rules[j]; 
     } 
    } 
}

そして、あなたのようなものを使用することができますスタイルの定義を変更する

findRule(".t1").style.backgroundColor = "Blue";

を。これは、cssクラス "t1"を使用するすべての要素に反映されます。一方

、jQueryを使って、あなたは

出典

2011-01-14 01:29:30

私は何か間違ったことをしましたか？：http://jsfiddle.net/RpVUN/ – Roger

@Rogerここに実例があります：http://jsfiddle.net/4DREQ/ –

これはexternライブラリを必要としない。それが他のプラタフォームで安定しているかどうかチェックします。ありがとうございました。 – Roger

私はjQueryをお勧めします。あなたは、単一のコード行でこれを行うことができます。

$(".t1").hide();

あなたのケースのために、あなたもjQueryUIに「アコーディオン」ウィジェットを見てみたいように聞こえます。すべてのブラウザは、すべてのメソッドをサポートしていないとして

出典

2011-01-14 00:52:43

（例えばIEがgetElementsByClassNameをサポートしていない、私は非常に簡単にクロスブラウザDOMへのアクセスを可能jQueryのようなライブラリを使用することをお勧めします。

しかし幸いにも、getElementsByTagNameがあるsupported by all browsersを、そうあなたができる：

var spans = document.getElementsByTagName('span'); 

function sh(cls) { 
    for (var i = spans.length; i--;) { 
     var element = spans[i]; 
     if (element.className.match(RegExp('\\b' + cls + '\\b'))) { 
      element.style.display = (element.style.display === 'none') ? '' : 'none'; 
     } 
    } 
}

を私はあなたが表示または非表示にしたいまたがるかわからないので、私はちょうどあなたが一つのグループの表示を切り替えるしようとしていると仮定し、あなただけのスパンの要素を取得しようとしている場合。一度私のように、スクリプトを置く必要がありますの内容の後（終了の前に<body>タグ）。さもなければ、span要素は見つからないでしょう。

DEMO

サポートされている場合、document.querySelectorAllを使用するとさらに良いかもしれません。あなたは何ができる：適切なsh関数を作成し、サポートされてquerySelectorAllかどうか一度

window.sh = (function() { 
    function toggleVisibility(element) { 
     element.style.display = (element.style.display === 'none') ? '' : 'none'; 
    } 

    if(typeof document.querySelectorAll === 'function') { 
     return function(cls) { 
      var spans = document.querySelectorAll('span.' + cls); 
      for (var i = spans.length; i--;) { 
       toggleVisibility(spans[i]); 
      } 
     }; 
    } 
    else { 
     var spans = document.getElementsByTagName('span'); 
     return function(cls) { 
      for (var i = spans.length; i--;) { 
       var element = spans[i]; 
       if (element.className.match(RegExp('\\b' + cls + '\\b'))) { 
        toggleVisibility(element); 
       } 
      } 
     }; 
    } 
}());

これがチェックされます。

DEMO 2

出典

2011-01-14 00:59:30

フェリックスで下さいん考え出しただろうクリックすると、他のものを非表示にする必要があります。見てみましょう：http://jsfiddle.net/v3vWM/ – Roger

@Roger：http://jsfiddle.net/v3vWM/3/を見てください...すべての要素に共通のクラスを追加すると簡単です。これは、あなたの望むことですか？あるいは 't1'だけ？ http://jsfiddle.net/v3vWM/4/ –

http://jsfiddle.net/v3vWM/3/の例は、私が探しているものです。私が今必要とするのは、デフォルトのためにt1を表示する（t2とt3を非表示にする）方法を見つけることだけです。 – Roger

jQueryのソリューション：http://jsfiddle.net/tEUYC/

更新ソリューション：再度更新http://jsfiddle.net/tEUYC/1/

：http://jsfiddle.net/tEUYC/2/

出典

2011-01-14 01:01:08

非常に良いです。唯一のことは、t1が表示されているときに、他のすべてのt2とt3が隠されていることです。 – Roger

@Roger更新された解決策はあなたにはいいですか？ –

今は手袋のように収まると思います。あなたは、どのようにt1を見えるようにし、他のすべてのもの（t2とt3を隠している）をデフォルトの負荷のためにどうやって教えてもらえますか？ – Roger

jQueryのは簡単で、以下のコードを使用しています:-)コードの一行だけを必要としています。 jQueryのここからダウンロードして、関数SH（t）でコメントがなければ、プロジェクトhttp://docs.jquery.com/Downloading_jQuery

出典

2011-01-14 04:10:04 Divi

Java Scriptで同じクラスのすべてのタグを表示/非表示にする方法は？

答えて

関連する問題