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>

我如何使所有具有相似 ID 的元素仅使用 1 个按钮来更改其 CSS 样式？谢谢。

4

6 回答 6

3

您的代码只会更新一个元素，因为getElementById只会返回一个元素（因为，正如我们所说，id应该是唯一的）。如果您需要将多个元素标记为相关，请使用 aclass代替。这是一个使用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>

如果您需要它在太旧的浏览器中工作getElementsByClassName，请尝试使用jQuery。它使这类事情变得容易得多

于 2013-02-11T17:55:30.677 回答
0

使用 aclass而不是id. 然后使用document.getElementsByClassName("p2")which 将返回匹配元素的数组并循环它们。

于 2013-02-11T17:50:14.133 回答
0

id 是唯一的，因此拥有多个实例是无效的 [ http://www.tizag.com/cssT/cssid.php] - 但是您可以使用一个类，然后使用 $(".className") 选择所有实例（假设 jQuery）。这个答案How to getElementByClass instead of GetElementById with Javascript? 包含很多有用的指针

于 2013-02-11T17:53:31.427 回答
0

正如其他人所说，不要在一个页面上多次使用相同的 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 回答
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 
<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 回答