Question

我尝试使用鼠标点击在按钮内替换div的背景颜色。

我只是通过将onclick="document.getElementById('nrOne').style.background = 'black'"添加到第一次点击来设法使其正常工作 <button id="btn1">元素。

<button id="btn1">

<div class="container-heading">
    <div class="container-number" id="nrOne">
        <h1> 01 </h1>
     </div>
    <div class="container-text">
        ...
    </div>

非常感谢任何帮助或提示。谢谢StackOverflow！

Answer 1

您可以使用切换方法。将它附加到按钮，然后创建两个将调用altenate的函数：

$("#btn1").toggle(function(){
    $("#nrOne").css({ "background-color": "#000000" });
}, function(){
    $("#nrOne").css({ "background-color": "#FF0000" });
});

没有切换方法，但点击方法：

var t = true;
$("#btn1").click(function(){
    if(t){
        t = false;
        $("#nrOne").css({ "background-color": "#000000" });
    }
    else{
        t = true;
        $("#nrOne").css({ "background-color": "#FF0000" });
    }
});

Answer 2

这是没有jQuery的代码

<button id="btn1" onclick="changeBackgroundColor(this)">

        function changeBackgroundColor(src)
        {
           document.getElementById("nrOne").style.background = 'black' // put some condition and change the color
        }

Answer 3

当您使用jQuery标记问题时，这是一个纯jQ实现，它使用$('#btn1').click(function() { $('#nrOne').toggleClass('black'); })在每次连续点击时简单地添加/删除一个类：

.black {
  background-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Click me</button>

<div class="container-heading">
  <div class="container-number" id="nrOne">
    <h1>01</h1>
  </div>
  <div class="container-text">
    <h1>02</h1>
  </div>
</div>

new

Answer 4

谢谢大家这么快回复！我没想到这么有用的社区，这是我的第一篇文章！我已经爱你了，这个很棒的网站!!

Answer 5

您只需使用javaScript即可完成相同的操作。（在这里，您可以根据需要为数组添加任意数量的颜色，并通过单击按钮循环遍历它们。）

var box = document.getElementById('div-of-which-you-want-the-color-to-change'),
        button = document.getElementById('button-with-event-handler'),
        indexOfChosenColor = 0;

button.onclick = function(){

        var colors = ['blue', 'red', 'green'];

        box.style.backgroundColor = colors[indexOfChosenColor%colors.length];
        indexOfChosenColor++;

}

如何通过替换点击更改按钮内div的背景？

5 个答案: