Question

我有一些div，默认情况下只有一个是可见的，其他所有都是隐藏的。每个div都有不同的背景颜色。单击某些按钮时，会显示不同的div。

我需要检查显示哪个div，并根据我想要更改身体背景而不是按钮点击事件。

我有一些其他按钮/ prev进入div，如果我在按钮上改变颜色，当我使用这些按钮时，所有div的颜色保持不变!!为此我想创建一个独立的函数来检查div何时被更改？

我有一个jQuery代码，当div显示条件为真时$('#divID').css('display') == 'block'为真，背景颜色应该改变但是它不起作用！。

jsfiddle：DEMO 我的HTML代码：

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

和jquery代码：

$(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();
    });
});

Answer 1

请尝试使用以下代码段或demo。

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

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

您的代码中存在以下问题： 1.您已在document.ready（）中实现了背景颜色更改逻辑，但您必须在每次单击事件时调用此逻辑以更改背景颜色。 2.您在DIV中添加了两次ID标记。

Answer 2

您需要在每次点击按钮时更新背景颜色，因为如果条件只检查文档准备就绪。

 $('#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');
    });

这是fiddle

Answer 3

＆＃34; 为此，我想制作一个独立的功能来检查何时 div被改变了吗？＆＃34;你在那里回答了你的问题。

你在那里回答了你的问题。把它放在一个函数中。在点击和加载页面时调用它。

在您的代码中，您只需在加载时设置背景颜色。每次更改选项卡的可见性时都需要运行检查。因此，将该代码放在方法中并在单击按钮时触发它，或者只是在单击方法中放置设置BG颜色的行。

OR

您可以使用数据属性和简单选择器来简化代码，以选择其他元素。不需要重复代码的大量if else块。

＆＃13;

$("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();  
});

＆＃13;

.data { display :none; }
.data.active { display : block; }

button.active { background-color: green; }

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

Answer 4

所以我正在使用一个类处理按钮，而不是div。还使用属性来获得backgorund颜色，并在每个具有background-changer类的div中定义它们。这是一个简单的解决方案，也可用于单个事件来处理所有这些。

更新：

添加了下一个/上一个功能，只要看到您在另一个答案上请求它。保持简单的代码没有使用单一事件。现在它还使用document.ready启动应用程序

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.com/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>

Answer 5

这是demo。

试试这段代码：

NullPointerException

问题：在您的代码中，您不会更改按钮点击事件的背景。你只需在第一次加载时检查它。

jQuery - 使用条件语句更改正文的背景颜色

5 个答案: