如何使用一个带有“IF”条件的按钮函数来更改DIV的背景颜色？

Question

我的问题可能有点模糊，但这是我现在拥有的。需要将这里的fiddle中的More按钮的背景颜色每次更改为橙色，只有当orange background 按钮被点击并且More div仍然在屏幕底部时（当单击MORE按钮时，MORE按钮会向上滑动）。以下是我的一些代码片段：

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

这里有几个按钮...

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

尝试弄清楚这个问题，但即使已经滑动上去了，更多 按钮的颜色仍然会改变...

- user3322081

---

如果“wide”与橙色同义，而“not-wide”与蓝色同义，则只需更改CSS指令以使颜色与宽度变化同步。Javascript保持不变，但可以整理一下。演示 - Roamer-1888

将CSS、HTML和Javascript中的“wide”全部改为“narrow”，因为目前情况是，“wide”实际上是狭窄的，而“narrow”才是宽阔的。 - Roamer-1888

很快你就会想要将“More”更改为“Less”。演示 - Roamer-1888

Answer 1

将此添加到您的$(document).ready中。

   $('input#upcoming').on('click', function(){

            $('a#toggle').css({'background':'#f4b066'});
             $('#btn-chat').css({'background':'#f4b066'});
        })

工作示例 http://jsfiddle.net/vo0d9ubj/5/

- Kiran Shinde

Answer 2

这应该可以做到，将以下内容添加到changeColor函数下方：

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

如果背景已经是橙色的，而更多按钮向上移动，那么背景应该改回蓝色吗？

- ray9209

---

@Kenny：你的解决方案没有检查更多按钮是否在改变背景颜色之前被移动了。 - ray9209

Answer 3

检查条件$("#blk-collaboration .chatbox").is(':visible')，判断More是否被切换。在这里我使用变量tempBottom来检查More div。

尝试这段查询。

var tempBottom=true;

function changeColor(color) {
    document.getElementById("circle").style.backgroundColor = color;
    }
function changeOrange(color) {
    if(tempBottom==true){
    $('.wide').css("background-color", "#f4b066");
    }
}
    document.getElementById("online").onclick = function() { changeColor("#92bf1e"); }
    document.getElementById("offline").onclick = function() { changeColor("#747474"); } 
    document.getElementById("upcoming").onclick = function() { changeOrange("#f4b066"); } 

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

DEMO

的英文意思为："

DEMO

"，它是HTML代码中的一行标记，用于创建一个级别为2的标题，并在标题中插入名为"link1"的变量和值为"DEMO"的链接。

- Sam1604

Answer 4

在您的情况下，这是如何做到的...

$("#upcoming").on("click", function(){  

    // check if 'More' button's position is in between 100px from the bottom
   if( ($("#toggle").offset().top >= ($(window).scrollTop() + $(window).height() - 100))) {

      // change the color        
      $("center").css("background", "#eebe57");

   }    

}); 

FIDDLE（滚动到Javascript部分的底部！）

请注意，这是机器翻译，可能不如人工翻译准确。

- Ari