Question

我正在尝试构建用户点击按钮的内容，并且它会更改＆＃34; section＆＃34;的所有实例的背景颜色。页面上的元素。当我意识到我无法让我的代码同时更改多个部分时，我将其缩减为仅一个部分，但仍然无法使其工作。

这是我的代码的简化版本......

<section id="colorSection">
    <div id="colorWrap" class="wrap">
        <h1>Choose the color you'd like the demo to be in</h1>
        <div id="colorSelector">
            <button id="black" class="colorButton"></button>
            <button id="white" class="colorButton"></button>
        </div>
   </div>
</section>

<script>
var colorSection = document.getElementById('colorSection');
var blackButton = document.getElementById('black');
var whiteButton = document.getElementById('white');
blackButton.onclick = function(){
colorWrap.style.backgroundColor = "#444;"
}
whiteButton.onclick = function(){
colorWrap.style.backgroundColor = "#efefef;"
}
</script>

我的逻辑告诉我......
我已经识别出一个部分并将其变成一个变量（＆＃34; colorWrap＆＃34;）。
我已经确定了按钮并将它们转换为变量。
我创建了一个在单击按钮时触发的功能，它会采用colorWrap部分并相应地更改其背景颜色。

显然，这并没有发生。所以有人可以告诉我在这个例子中我哪里出错了，然后可能指出我能够影响一个元素的所有实例（而不是我用它的ID识别的那个）的方向。单击按钮？

Answer 1

这很容易通过jQuery实现。您可以使用它的选择器功能选择所需的所有<section>，并为其应用样式：

对于一个部分

blackButton.onclick = function(){
    $("section#colorSection").css("background", "#444");
}

whiteButton.onclick = function(){
    $("section#colorSection").css("background", "#efefef");
}

适用于所有版块

blackButton.onclick = function(){
    $("section").css("background", "#444");
}

whiteButton.onclick = function(){
    $("section").css("background", "#efefef");
}

只需使用jQuery的选择器选择所有<section>（或者您的选择器可能类似于section.ColorToggle，因此您可以指定要使用CSS类切换的部分。）

在上面，我使用ID来选择特定部分，因此只有它是彩色的。

Answer 2

你的包装变量是错误的（在onlick事件中），最后的十六进制颜色应该没有;：

＆＃13;

var colorSection = document.getElementById('colorSection');
var blackButton = document.getElementById('black');
var whiteButton = document.getElementById('white');
blackButton.onclick = function () {
    colorSection.style.backgroundColor = "#444"
}
whiteButton.onclick = function () {
    colorSection.style.backgroundColor = "#efefef"
}

＆＃13;

<section id="colorSection">
    <div id="colorWrap" class="wrap">
         <h1>Choose the color you'd like the demo to be in</h1>

        <div id="colorSelector">
            <button id="black" class="colorButton">Black</button>
            <button id="white" class="colorButton">White</button>
        </div>
    </div>
</section>

＆＃13;

Answer 3

您没有以任何方式设置colorWrap

var colorWrap = document.getElementById('colorWrap');

Answer 4

＆＃13;

document.getElementById('red').onclick = function () {
    document.getElementById('mainSection').style.backgroundColor = "#ff8800"
    document.getElementById('mainSection').style.color = "#fff"
}
document.getElementById('white').onclick = function () {
    document.getElementById('mainSection').style.backgroundColor = "#efefef"
    document.getElementById('mainSection').style.color = "#333"
}

＆＃13;

<section id="mainSection">
    <div id="colorWrap" class="wrap">
         <h1>Choose the color you'd like the demo to be in</h1>
    </div>
 Try It Once
</section>
 <div id="color">
            <button id="red" class="colorButton">Add Color</button>
            <button id="white" class="colorButton">Remove Color</button>
        </div>

＆＃13;

Javascript onclick函数来更改元素的所有实例？

4 个答案: