Question

我的问题可能有点模糊，但这就是我现在所拥有的。 Here's the fiddle I did

每次点击橙色背景 按钮时，我都需要更多按钮将背景颜色更改为橙色，并且仅当时更多 div仍位于屏幕底部（单击时，更多按钮会向上滑动

）

this is how

我的代码的一些片段：

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

试图解决这个问题，但更多 button的颜色仍然会发生变化，即使它已经滑落......

Answer 1

在$（文件）.ready

中添加

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

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

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

Answer 2

应该这样做，在changeColor函数下面添加：

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

如果背景已经是橙色，并且更多按钮向上移动，背景是否会变回蓝色？

Answer 3

检查条件$("#blk-collaboration .chatbox").is(':visible')是否切换更多。这里我使用变量tempBottom来检查更多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

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部分的底部！）

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

4 个答案:

DEMO