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

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

转载作者：可可西里更新时间：2023-11-01 13:06:03

25

4

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

我需要检查显示的是哪个 div，并基于此我想更改正文背景而不是按钮单击事件。

我有一些其他按钮 next/prev 移动到 div 中，如果我在使用这些按钮时单击按钮更改颜色，则所有 div 的颜色保持不变!为此，我想制作一个独立的函数来检查 div 何时更改？

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

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

最佳答案

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

方法一:

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

方法二:

<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 标签。

关于javascript - jQuery - 使用条件语句更改正文的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33038738/

25

4

0

文章推荐： html - 这在 css 字体 : 20vmin/1 FontNameBold;? 中意味着什么

文章推荐： php - 整理 REST API 请求的 Htaccess 规则

文章推荐： Php 匹配两个数组之间的值

文章推荐： html - 没有导航栏 Bootstrap 的网站 Logo

java - 想要创建 if 语句，然后是几个 else-if 语句，最后是一个 "capture-all"else-语句
创建一个“海盗对话”，可以选择左手或右手。我希望它对“左”和“右”的不同拼写做出积极的回答(正如您将在代码中看到的那样)，但是，当我为所有非“右”或“左”的输入添加最终的“else”代码时，它给了我一
VBS教程：VBScript 语句-With 语句
With 语句对一个对象执行一系列的语句。 With object statements End With 参数 object 必需的部分
VBS教程：语句-While...Wend 语句
While...Wend 语句当指定的条件为 True 时，执行一系列的语句。 While condition &nbsp； Version [stat
python - 在同一行上创建 for 语句，但不在下一个输入上创建 for 语句
所以我正在处理的代码有一个小问题。 while True: r = input("Line: ") n = r.split() if r == " ":
javascript - 嵌套 if 语句 - 如何重构条件以在迭代时使用一个 if 语句
我有一个对象数组: var contacts = [ { "firstName": "Akira", "lastName": "Laine", "number"
c - 在函数中有两个return 语句，将执行哪个return 语句？
int main() { int f=fun(); ... } int fun() { return 1; return 2; } 在上面的程序中，当从main函数中调用一个
ios - Switch 语句 VS If 语句
我的项目中有很多 if 语句、嵌套 if 语句和 if-else 语句，我正在考虑将它们更改为 switch 语句。其中一些将具有嵌套的 switch 语句。我知道就编译而言，switch 语句通常更
VBS教程：VBScript 语句-Rem 语句
Rem 语句包含程序中的解释性注释。 Rem comment 或 ' comment comment 参数是需要包含的注释文本。在 Rem 关键字和 comment 之间应有一个空格。
VBS教程：VBScript 语句-ReDim 语句
ReDim 语句在过程级中声明动态数组变量并分配或重新分配存储空间。 ReDim [Preserve] varname(subscripts) [, varname(subscripts)]
VBS教程：VBScript 语句-Randomize 语句
Randomize 语句初始化随机数生成器。 Randomize [number] number 参数可以是任何有效的数值表达式。说明 Randomize 使用 number 参数初始
VBS教程：VBScript 语句-Public 语句
Public 语句定义公有变量并分配存储空间。在 Class 块中定义私有变量。 Public varname[([subscripts])][, varname[([subscripts])
VBS教程：VBScript 语句-Sub 语句
Sub 语句声明 Sub 过程的名称、参数以及构成其主体的代码。 [Public [Default]| Private] Sub name [( arglist )]
VBS教程：VBScript 语句-Set 语句
Set 语句将对象引用赋给一个variable或property，或者将对象引用与事件关联。 Set objectvar = {objectexpression | New classname
javascript - 我在一个 for 循环中有两个 if 语句，为什么有时会在第一个语句之前运行第二个 if 语句？
我有这个代码块，有时第一个 if 语句先运行，有时第二个 if 语句先运行。我不确定为什么会这样，因为我认为 javascript 是同步的。 for (let i = 0; i < dataObje
javascript - 为什么这段代码不起作用？ Javascript if 语句，else if 语句
这是一个 javascript 代码，我想把它写成这样:如果此人回答是，则回复“那很酷”，如果此人回答否，则回复“我会让你开心”，如果此人回答的问题包含"is"或“否”，请说“仅键入”是或否，没有任何
java - 短 if 语句 "inside"短 if 语句
这是我的任务，我尝试仅使用简短的 if 语句来完成此任务，我得到的唯一错误是使用“(0.5<=ratio<2 )”，除此之外，构造正确吗？ Scanner scn = new Scanner(
postgresql - SELECT 语句中的 SQL 语句 If 语句
有没有办法在 select 语句中使用 if 语句？我不能在这个中使用 Case 语句。实际上我正在使用 iReport 并且我有一个参数。我想要做的是，如果用户没有输入某个参数，它将选择所有实例。
java - switch 语句 vs if 语句，哪个对性能更好？
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: If vs. Switch Speed 我将以 C++ 为例，但我要问的问题不是针对特定语言的。我的意思是一
VBS教程：VBScript 语句-Property Set 语句
Property Set 语句在 Class 块中，声明名称、参数和代码，这些构成了将引用设置到对象的 Property 过程的主体。 [Public | Private] Pro
VBS教程：VBScript 语句-Property Let 语句
Property Let 语句在 Class 块中，声明名称、参数和代码等，它们构成了赋值（设置）的 Property 过程的主体。 [Public | Private] Prop

首页

博学

6Ren·AI

商城

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