0

私の考えは、すべての隠しテキストを非表示/表示するボタンを作成することでした(テキストを黒で強調表示して非表示にし、テキストの背景色を透明にして表示します)。ただし、以下に示すコードは、指定された ID (「p2」) を持つ最初の要素に対してのみ機能します。

Javascript:

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {  
        test.value = "Open Spoiler"; 
        document.getElementById("p2").style.backgroundColor="black";  
    }
    else  
    {  
        test.value = "Hide Spoiler"; 
        document.getElementById("p2").style.color="black";
        document.getElementById("p2").style.backgroundColor="transparent";  
    }
}

HTML:

<input onclick="change()" type="button" value="Open Curtain" id="button1"></input>
<br>
<span id="p2">Hidden text</span> Test for more <span id="p2">Hidden text</span> test again. <span id="p2">Hidden text</span>

1 つのボタンだけを使用して CSS スタイルを変更するには、同様の ID を持つすべての要素を作成するにはどうすればよいですか? ありがとう。

4

6 に答える 6

3

あなたのコードは 1 つの要素だけを更新getElementByIdするだけidです。複数の要素を関連としてマークする必要がある場合は、class代わりに a を使用します。JavaScriptを使用した実際の例を次に示します。class

function change() {
    var test = document.getElementById("button1");
    var els = document.getElementsByClassName("p2");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.backgroundColor = "black";
        }
    } else {
        test.value = "Hide Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.color = "black";
            els[i].style.backgroundColor = "transparent";
        }
    }
}

HTML:

<input onclick="change()" type="button" value="Hide Spoiler" id="button1"></input>
<br>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

には古すぎるブラウザで動作させる必要がある場合は、 jQuerygetElementsByClassNameを使用してみてください。それはこの種のことをずっと簡単にします

于 2013-02-11T17:55:30.677 に答える
0 
<input onclick="change()" type="button" value="Open Curtain" id="button1"/>
<br/>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

次にjquery：

function change() {
    var test = document.getElementById("button1");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        $('.p2').css('background-color','black')

    }
    else {
        test.value = "Hide Spoiler";
        $('.p2').css('background-color', 'transparent')

    }
}

私はそれをテストしました

于 2013-02-11T18:39:57.907 に答える
0

id は一意であるため、複数のインスタンスを使用することはできません [ http://www.tizag.com/cssT/cssid.php ] - ただし、クラスを使用してから、 $(".className") ですべてのインスタンスを選択できます ( jQueryを想定しています）。この回答Javascript で GetElementById の代わりに getElementByClass を取得する方法は? 役立つヒントがたくさん含まれています

于 2013-02-11T17:53:31.427 に答える
0

私は同じIDの概念に反対します...しかし、以下のように試してみてください.

フィドルの例: http://jsfiddle.net/RYh7U/65/

CSS

.mask
{
color : red;
}

Javascript :

function change()
{
 var elements = document.getElementById("p2").parentNode.getElementsByTagName("span");
    for(var i=0; i<elements.length; i++)
      elements[i].className = "mask";
}
于 2013-02-11T18:09:34.467 に答える
0

classの代わりに を使用しidます。次に、document.getElementsByClassName("p2")which を使用して、一致する要素の配列を返し、それらをループします。

于 2013-02-11T17:50:14.133 に答える
0

他の人が言ったように、1 つのページで同じ ID を複数回使用しないでください。代わりに、クラス名またはデータ属性を使用してください。そして、jQueryで質問をマークしたので：

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {
        test.value = "Open Spoiler"; 
        $('.className').css('background-color','transparent');
    }
    else 
    {
        test.value = "Hide Spoiler"; 
        $('.className').css('background-color','transparent');
        $('.className').css('color','black');
    }
}

jQuery を使用する場合は、ボタンのクリック イベントを次のように使用することもお勧めします。

$('#button1').click(function() {
  ...
});
于 2013-02-11T17:58:00.083 に答える