如何使用带有“IF”条件的按钮改变DIV的背景颜色

My question might be a bit vague but here's what I have right now. Here's the fiddle I did

我的问题可能有点含糊，但这是我现在的问题。这是我做的小提琴

I need the More button to change background color to orange every time the orange background button is clicked and only if the More div is still at the bottom of the screen (The MORE button slides up when it's clicked)

每次点击橙色背景按钮时，我需要更多的按钮来将背景颜色改为橙色，而且只有当div越长时，它才会显示在屏幕的底部(点击时，会有越多的按钮出现)

And some snippet of my code:

我的代码片段:

<script>

$(document).ready(function(){
 $('.chatbox').hide();
    $('#btn-chat').click(function() {
        $("#blk-collaboration .chatbox").slideToggle("slow",function(){
        $("#blk-collaboration #toggle").css("background","transparent");
    });
      $(this)//this is a button DOM element. wrapping in jQuery object.
      .toggleClass('wide'); // removing wide class so button became smaller.
    });
});

function changeColor(color) {
document.getElementById("circle").style.backgroundColor = color;
}

document.getElementById("online").onclick = function() { changeColor("#92bf1e"); }
document.getElementById("offline").onclick = function() { changeColor("#747474"); } 
document.getElementById("upcoming").onclick = function() { changeOrange("#f4b066"); } 



</script>

Here are the buttons...

这是按钮……

<input id="online" type="button" value="Online" />
<input id="offline" type="button" value="Offline" />
<input id="upcoming" type="button" value="Orange Background" />

Been trying to figure this out but the color of the more button still changes even if it's already slided up...

试着找出答案，但是按钮的颜色仍然会改变，即使它已经被滑动了…

4 个解决方案

#1

This should to do it, add this below the changeColor function:

应该这样做，把它添加到changeColor函数下面:

function changeOrange(color) {
 if ($('#btn-chat').hasClass('wide'))
     document.getElementById("btn-chat").style.backgroundColor = color;
}

If the background is already orange, and the more button moves up, should the background change back to blue?

如果背景已经是橙色的，按钮越往上移动，背景是否应该重新变为蓝色?

4 个解决方案

#1

更多相关文章

随机推荐