javascript - jQuery - Change background color of body using conditional statement

I have some divs and by default only one is visible and all others are hidden. Every div has a different background color. Based on some buttons when are clicked , different divs are displayed.

I need to check which div is displayed and based on that I want to change the body background NOT on button click event.

I have some other buttons next/prev that move into divs, and if I change color on button click when I use those buttons the color stay the same for all divs!! For that i want to make an independent function that will check when divs are changed?

I have a jQuery code, which when a div i displayed the condition is true $('#divID').css('display') == 'block' is true the background color should be changed but it's not working!.

jsfiddle: DEMO My HTML code:

<body>
<br/><br/><br/>
<div id="ad1" style="display:block;" > Div content 1</div><br/>
<div id="ad2" style="display:none;"  > Div content 2</div><br/>
<div id="ad3" style="display:none;"  > Div content 3</div><br/>
<div id="ad4" style="display:none;"  > Div content 4</div><br/>
<br/><br/><br/>
<button id='button1'> click 1</button>
<button id='button2'> click 2</button>
<button id='button3'> click 3</button>
<button id='button4'> click 4</button>
</body>

and jquery code:

$(document).ready(function () {  
    if($('#ad1').css('display') == 'block'){
        $("body").css('background-color', '#ebb614');
    } 
    if($('#ad2').css('display') == 'block'){
        $("body").css('background-color', '#acb7a8');
    } 
    if($('#ad3').css('display') == 'block'){
        $("body").css('background-color', '#4f795b');
    } 
    if($('#ad4').css('display') == 'block'){
        $("body").css('background-color', '#7f7a6e');
    } 

    $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
    });
});

I have some divs and by default only one is visible and all others are hidden. Every div has a different background color. Based on some buttons when are clicked , different divs are displayed.

I need to check which div is displayed and based on that I want to change the body background NOT on button click event.

I have a jQuery code, which when a div i displayed the condition is true $('#divID').css('display') == 'block' is true the background color should be changed but it's not working!.

jsfiddle: DEMO My HTML code:

<body>
<br/><br/><br/>
<div id="ad1" style="display:block;" > Div content 1</div><br/>
<div id="ad2" style="display:none;"  > Div content 2</div><br/>
<div id="ad3" style="display:none;"  > Div content 3</div><br/>
<div id="ad4" style="display:none;"  > Div content 4</div><br/>
<br/><br/><br/>
<button id='button1'> click 1</button>
<button id='button2'> click 2</button>
<button id='button3'> click 3</button>
<button id='button4'> click 4</button>
</body>

and jquery code:

$(document).ready(function () {  
    if($('#ad1').css('display') == 'block'){
        $("body").css('background-color', '#ebb614');
    } 
    if($('#ad2').css('display') == 'block'){
        $("body").css('background-color', '#acb7a8');
    } 
    if($('#ad3').css('display') == 'block'){
        $("body").css('background-color', '#4f795b');
    } 
    if($('#ad4').css('display') == 'block'){
        $("body").css('background-color', '#7f7a6e');
    } 

    $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
    });
});

Share Improve this question edited Oct 9, 2015 at 13:12 asked Oct 9, 2015 at 12:49 user5308956

Hint: $('#left-info1').is(':visible') is a more traditional way of determining if that element is visible – Jamiec Commented Oct 9, 2015 at 12:50
@Jamiec i tried that but that doesn't fix my problem.. :/ – user5308956 Commented Oct 9, 2015 at 12:53
Check this. If this is what you need then I'll add my answer? – Deepak Biswal Commented Oct 9, 2015 at 12:54
3 you are not changing background on click event? Which is missing? – Deepak Biswal Commented Oct 9, 2015 at 12:54
1 @GuilhermeFerreira i edited my question, that mistake i did only on jsfiddle! – user5308956 Commented Oct 9, 2015 at 13:13

| Show 13 more ments

5 Answers 5

Sorted by: Reset to default 3

Please try with the below code snippet or demo.

Method 1:

<body> 
<br />
<br />
<div id="ad1" style="display: block;">Div content 1</div>
<br />
<div id="ad2" style="display: none;">Div content 2</div>
<br />
<div id="ad3" style="display: none;">Div content 3</div>
<br />
<div id="ad4" style="display: none;">Div content 4</div>
<br />
<br />
<br />
<br />
<button id='button1'>click 1</button>
<button id='button2'>click 2</button>
<button id='button3'>click 3</button>
<button id='button4'>click 4</button>

<script>

    $(document).ready(function () {


        $('#button1').on('click', function () {
            $('#ad1').show();
            $('#ad2 ,#ad3 , #ad4').hide();
            test(1);
        });
        $('#button2').on('click', function () {
            $('#ad2').show();
            $('#ad1 ,#ad3 , #ad4').hide();
            test(2);
        });
        $('#button3').on('click', function () {
            $('#ad3').show();
            $('#ad2 ,#ad1 , #ad4').hide();
            test(3);
        });
        $('#button4').on('click', function () {
            $('#ad4').show();
            $('#ad2 ,#ad3 , #ad1').hide();
            test(4);
        });
    });

    function test(id) {

        if (id == 1) {
            $("body").css('background-color', '#ebb614');
        }
        if (id == 2) {
            $("body").css('background-color', '#acb7a8');
        }
        if (id == 3) {
            $("body").css('background-color', '#4f795b');
        }
        if (id == 4) {
            $("body").css('background-color', '#7f7a6e');
        }
    }

</script>
<style>
    body {
        height: 5000px;
        background-color: #4e795b;
        margin: 0px;
        padding: 0px;
    }
</style>
</body>

Method 2:

<body>
    <div id="ad1" style="display: block;">Div content 1</div>
    <br />
    <div id="ad2" style="display: none;">Div content 2</div>
    <br />
    <div id="ad3" style="display: none;">Div content 3</div>
    <br />
    <div id="ad4" style="display: none;">Div content 4</div>
    <br />
    <br />
    <br />
    <br />
    <button id='button1'>click 1</button>
    <button id='button2'>click 2</button>
    <button id='button3'>click 3</button>
    <button id='button4'>click 4</button>

    <script>

        $(document).ready(function () {


            $('#button1').on('click', function () {
                $('#ad1').show();
                $('#ad2 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button2').on('click', function () {
                $('#ad2').show();
                $('#ad1 ,#ad3 , #ad4').hide();
                test();
            });
            $('#button3').on('click', function () {
                $('#ad3').show();
                $('#ad2 ,#ad1 , #ad4').hide();
                test();
            });
            $('#button4').on('click', function () {
                $('#ad4').show();
                $('#ad2 ,#ad3 , #ad1').hide();
                test();
            });
        });

        function test(id) {
            if ($('#ad1').css('display') == 'block') {
                $("body").css('background-color', '#ebb614');
            }
            if ($('#ad2').css('display') == 'block') {
                $("body").css('background-color', '#acb7a8');
            }
            if ($('#ad3').css('display') == 'block') {
                $("body").css('background-color', '#4f795b');
            }
            if ($('#ad4').css('display') == 'block') {
                $("body").css('background-color', '#7f7a6e');
            }
        }

    </script>
    <style>
        body {
            height: 5000px;
            background-color: #4e795b;
            margin: 0px;
            padding: 0px;
        }
    </style>
</body>

Below issue is exists in your given code: 1. you have implemented background color change logic in document.ready() but you have to recall this logic on every click event to change the background color. 2. you have added ID tag twice in your DIV.

You need to update background color on every button click because if condition will only check on document ready.

 $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#ebb614');
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
         $("body").css('background-color', '#acb7a8');
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
        $("body").css('background-color', '#4f795b');
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
        $("body").css('background-color', '#7f7a6e');
    });

here is the fiddle

"For that i want to make an independent function that will check when divs are changed?" You answered your question right there.

You answered your question right there. Put it in a function. Call it when they click and when the page loads.

In your code, you only set the background color on load. You need to run the check every time you change the visibility of the tabs. So put that code inside of a method and trigger it when the button is clicked or just put the line that sets the BG color in the click methods.

You can simplify the code by using data attributes and simple selectors to select the other elements. No need for huge if else blocks with repeated code.

$("button[data-id]").on("click", function(){
  var btnClicked = $(this).addClass("active");  //The button that was clicked
  btnClicked.siblings(".active").removeClass("active");
  $("body").css("background-color", btnClicked.data("color"));  //read the data attribute and set color
  $(".data.active").removeClass("active");  //remove the class from element that was already selected
  $(btnClicked.data("id")).addClass("active");  //add the active class so content shows up
});
$("#button1").click();  //Activate the first tab

$("button.page").on("click", function(){  
  var dir = $(this).data("dir"),
      btnTabs = $("button[data-id]"),
      activeBtn = btnTabs.filter(".active"),
      nextBtn;
  if (dir=="1") {
      nextBtn = activeBtn.next();
      if (nextBtn.length===0) {
        nextBtn = btnTabs.first();
      }
  } else {
      nextBtn = activeBtn.prev();
      if (nextBtn.length===0) {
        nextBtn = btnTabs.last();
      }    
  }
  nextBtn.click();  
});

.data { display :none; }
.data.active { display : block; }

button.active { background-color: green; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad1" class="data" id="left-info1"> Div content 1</div><br/>
<div id="ad2" class="data" id="left-info2"> Div content 2</div><br/>
<div id="ad3" class="data" id="left-info3"> Div content 3</div><br/>
<div id="ad4" class="data" id="left-info4"> Div content 4</div><br/>
<br/><br/><br/>
<div>
    <button id='button1' data-id="#ad1" data-color="#ebb614"> click 1</button>
    <button id='button2' data-id="#ad2" data-color="#acb7a8"> click 2</button>
    <button id='button3' data-id="#ad3" data-color="#4f795b"> click 3</button>
    <button id='button4' data-id="#ad4" data-color="#7f7a6e "> click 4</button>
</div>
<hr/>
<button class="next page" data-dir="-1">Prev</button>
<button class="next page" data-dir="1">Next</button>

So I'm using a class to handle then buttons and also the divs instead. Also using attributes to have the backgorund colors and they are defined inside each div that have background-changer class. It's a simple solution and also uses on single event to handle all this.

UPDATE:

Added the Next/Prev Feature once saw you requested it on the other answer. Keeping the simple code.
No using single event. Now its also using document.ready to start application

jsfiddle-link

<div id="ad1" class="background-changer active" data-background-color="#f00"  > Div content 1</div><br/>
<div id="ad2" class="background-changer" data-background-color="#0f0" > Div content 2</div><br/>
<div id="ad3" class="background-changer" data-background-color="#00f" > Div content 3</div><br/>
<div id="ad4" class="background-changer" data-background-color="#444" > Div content 4</div><br/>

<button id='button1' class="show-div-button" data-div-id="ad1"> click 1</button>
<button id='button2' class="show-div-button" data-div-id="ad2"> click 2</button>
<button id='button3' class="show-div-button" data-div-id="ad3"> click 3</button>
<button id='button4' class="show-div-button" data-div-id="ad4"> click 4</button>

<button class='show-div-button prev' data-div-id="">Prev</button>
<button class='show-div-button next' data-div-id="">Next</button>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
    activateDiv($(".background-changer.active").attr("id"));
})
$(document).on("click",".show-div-button",function(){
    activateDiv(this.getAttribute("data-div-id"));
})
function activateDiv(id){
    $bgchangerarray = $(".background-changer");
    id = id =='' ? $bgchangerarray[0].id : id; 
    var $bgchanger = $("#"+id);
    $bgchangerarray.hide().removeClass("active");
    $bgchanger.show().addClass("active");;
    var count = $bgchangerarray.size()-1, 
        index = $bgchanger.index('.background-changer'), 
        next = index==count ? 0 : index+1,
        prev = index==0 ? count : index-1;
    $(".show-div-button.prev").attr("data-div-id",$bgchangerarray[prev].id)
    $(".show-div-button.next").attr("data-div-id",$bgchangerarray[next].id)
    $("body").css("background-color",$bgchanger.attr("data-background-color")); 
}   
</script>

Here is a demo.

Try this code:

$(document).ready(function () {  
    $('#button1').on('click', function () {
        $('#ad1').show();
        $('#ad2 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#ebb614');
    });
    $('#button2').on('click', function () {
        $('#ad2').show();
        $('#ad1 ,#ad3 , #ad4').hide();
        $("body").css('background-color', '#acb7a8');
    });
    $('#button3').on('click', function () {
       $('#ad3').show();
        $('#ad2 ,#ad1 , #ad4').hide();
        $("body").css('background-color', '#4f795b');
    });
    $('#button4').on('click', function () {
        $('#ad4').show();
        $('#ad2 ,#ad3 , #ad1').hide();
        $("body").css('background-color', '#7f7a6e');
    });
});

PROBLEM: In your code you are not changing the background on button click event. You just simply checking it in first load.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery - Change background color of body using conditional statement - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)