Изменить цвет фона всей страницы при нажатии на главный div

Question

Я пытаюсь изменить цвет фона всей моей страницы, щелкнув по моему div с id main. Вот my code:

$(document).ready(function() { 
 
    var color = 1; 
 
\t \t \t 
 
\t $('#main').click(function() \t { 
 
     if (color == 1) \t { 
 
\t \t  $(this).css("background-color", "green"); 
 
\t \t \t color = 2; 
 
\t \t } else if (color == 2) { 
 
\t \t \t $(this).css("background-color", "black"); 
 
\t \t \t color = 1; \t 
 
\t \t } \t \t \t \t \t 
 
\t }); 
 
});

#admin_div { 
 
    position: absolute; 
 
\t width: 80%; 
 
\t height: 80%; 
 
\t border: 2px solid white; 
 
\t border-radius: 10px; 
 
\t background-color: #D9D9D9; 
 
\t z-index: 1; 
 
}  \t \t 
 
h1 { 
 
    margin-left: 15px; 
 
}  \t \t 
 
#main { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t z-index: 0; 
 
}

 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="js/bootstrap.min.js"></script> 
 
<div id="main"> 
 
    <div id="admin_div"> \t \t 
 
\t \t <h1>Admin Panel</h1> 
 
\t </div> 
 
</div>

Но цвет фона также меняется, если я нажимаю на другой элемент, то основной. Я думаю, это потому, что все находится внутри главного div. Возможно ли это?

Answer 1

Нажатие на красный цвет (цель дел) все работает, как exprected

http://jsfiddle.net/22m0to5o/1/

var color = 1; 

$('#main').click(function (event) { 

    if (event.target !== this) return; 

    if (color == 1) 
    { 
     $('body').css("background-color", "green"); 
     color = 2; 
    } 
    if (color == 2) 
    { 
     $('body').css("background-color", "black"); 
     color = 1; 
    } 

}); 

Answer 2

, если вы хотите изменить цвет фона всей страницы, просто переписать код JQuery. измените $ (this) на $ ('body').

<script> 
$(document).ready 
(
    function() 
    { 
     var color = 1; 

     $('#main').click 
     (
      function() 
      { 
       if (color == 1) 
       { 
        $('body').css("background-color", "green"); 
        color = 2; 
       } 
       else if (color == 2) 
       { 
        $('body').css("background-color", "black"); 
        color = 1; 
       } 

      } 
     ); 

    } 
); 
</script> 

Answer 3

Это своего рода бесполезная часть кода JavaScript, хотя я полагаю, что это может быть полезно для чего-то. Является ли это просто пустой тратой времени или нет, я сразу же представлю вам код, который позволит вам динамически изменять цвет фона на странице.

<script language="JavaScript"> 
<!-- 
function changeBGC(color){ 
document.bgColor = color; 
} 
//--> 
</script> 

Я думаю, что это очень просто.