Question

我的想法是创建一个按钮来隐藏/显示所有隐藏文本（通过突出显示黑色文本隐藏，通过使文本的背景颜色透明来显示）。但是，如下所示，代码仅适用于具有给定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样式？谢谢。

Answer 1

您的代码只会更新一个元素，因为getElementById只返回一个元素（因为，正如我们所说，id应该是唯一的）。如果您需要将多个元素标记为相关，请使用class。 Here is a working example using class，JavaScript：

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。它使这种事情变得更容易

Answer 2

使用class代替id。然后使用document.getElementsByClassName("p2")，它将返回匹配元素的数组并循环遍历它们。

Answer 3

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

Answer 4

正如其他人所说，不要在一个页面上多次使用相同的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() {
  ...
});

Answer 5

我反对相同的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";
}

Answer 6

<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')

    }
}

我已经测试了它

如何使用一个按钮将CSS样式应用于具有相同ID的所有元素？

6 个答案: