Question

点击root按钮后，如何让其他按钮自动从黑色变为相应的颜色而无需用户点击按钮？其他圈子不应该是按钮吗？单击根按钮后，我可以在2秒内更改颜色的圆圈吗？这是我的JS Fiddle

<div class="interactiveBox">
<button id="root" onclick="changeColor(this,'#ff0000')" style="background-color: black"></button>
<button id="sacral" onclick="changeColor(this,'orange')" style="background-color: black"></button>
<button id="solar" onclick="changeColor(this,'yellow')" style="background-color: black"></button>
<button id="heart" onclick="changeColor(this,'green')" style="background-color: black"></button>
<button id="throat" onclick="changeColor(this,'blue')" style="background-color: black"></button>
<button id="third" onclick="changeColor(this,'purple')" style="background-color: black"></button>
<button id="crown" onclick="changeColor(this,'white')" style="background-color: black"></button>

function changeColor(obj,color) {
    //reset other buttons
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].style.backgroundColor = "#000000" ;
    }
    obj.style.backgroundColor=color;
}

Answer 1

您可以动态触发其他按钮上的点击。此外，如果您想在2秒后执行此操作，请使用setTimeout：

document.getElementById('root').addEventListener("click", function() {
  setTimeout(function() {
    document.querySelectorAll(".interactiveBox button:not(#root)").forEach(function() {
      this.click();
    });
  }, 2000);
});

Answer 2

我会将每个按钮的目标颜色添加为数据属性，然后在根按钮的onclick事件中，循环显示其他按钮，访问数据属性，并相应地设置颜色。

<强> HTML

<button id="root" class="colorChange" onclick="changeColor()" style="background-color: black"></button>
<button id="sacral" class="colorChange" data-color="orange" style="background-color: black"></button>
<button id="solar" class="colorChange" data-color="yellow" style="background-color: black"></button>
<button id="heart" class="colorChange" data-color="green' style="background-color: black"></button>
<button id="throat" class="colorChange" data-color="blue')style="background-color: black"></button>
<button id="third" class="colorChange" data-color="purple" style="background-color: black"></button>
<button id="crown" class="colorChange" data-color="white' style="background-color: black"></button>

Javascript（简单的jQuery）

function changeColor() {
    $('button.colorChange').each(function(button) {
        $(button).css({ 'background-color' : $(button).data('color') });
    });
}

Answer 3

我的JSFiddle在这里：http://jsfiddle.net/naokiota/4t89D/2/

我想你想做的是这样的事情：

<div class="interactiveBox">
    <button id="root"   onclick="changeColor(this)" data-color="#ff0000"></button>
    <button id="sacral" onclick="changeColor(this)" data-color="orange"></button>
    <button id="solar"  onclick="changeColor(this)" data-color="yellow"></button>
    <button id="heart"  onclick="changeColor(this)" data-color="green"></button>
    <button id="throat" onclick="changeColor(this)" data-color="blue"></button>
    <button id="third"  onclick="changeColor(this)" data-color="purple"></button>
    <button id="crown"  onclick="changeColor(this)" data-color="white"></button>
</div>

JavaScript的：

<script type="text/javascript">
function changeColor(obj) {
    //reset other buttons
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){      
        buttons[i].style.backgroundColor = "#000000" ;
    }
    obj.style.backgroundColor=obj.getAttribute('data-color');
    if(obj.id == "root"){
        setTimeout(changeAllcolors,2000);
    }
}
function changeAllcolors(){
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        var color = buttons[i].getAttribute('data-color');
        buttons[i].style.backgroundColor = color;
    }
}
</script>

希望这有帮助。

如何获得自动换色？

3 个答案: