否则，如果没有在单击jQuery上运行语句

Question

我在点击按钮时遇到问题。 在下面的代码中，当我单击按钮时，条件将检查按钮的文本是否等于“ day”，然后将“ body”的“ background-color”更改为“ red”，还将“ body”的“ text”更改为按钮”到“晚上”。 在这里，如果单击带有夜间文本的按钮，我想再次将主体背景颜色和按钮文本更改为第一个。 我对此感到非常困惑。

 var buttonText = $('button').text(); $('button').click(function() { if (buttonText == 'day') { $('body').css({ 'background': 'red' }) $('button').text('night'); } else if (buttonText == 'night') { $('body').css({ 'background': 'yellow' }) } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <button type="button" name="button">day</button>

Answer 1

您需要在事件处理程序中声明buttonText变量，否则它将始终具有脚本开始时的值。

另外，您的else块中缺少将文本设置回“ day”的功能。

 $('button').click(function() { var buttonText = $('button').text(); if (buttonText == 'day') { $('body').css({ 'background': 'red' }) $('button').text('night'); } else if (buttonText == 'night') { $('body').css({ 'background': 'yellow' }); $('button').text('day'); } })

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="training.css"> </head> <body> <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <button type="button" name="button">day</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <script src="training.js" charset="utf-8"></script> </body> </html>

Answer 2

从根本上来说，这里有很多编程是个坏主意。 您应该避免使用应基于表示形式（html值）的逻辑。 您还应该避免对html元素进行值更改（css）。

相反，您的逻辑应基于元素的类，并且您的表示也应基于类。

请阅读解耦HTML，CSS和JavaScript 。

 $('.js-update').click(function(e) { var $btn = $(e.currentTarget); // button clicked var addClass = $btn.data('addclass'); var removeClass = $btn.data('removeclass'); var target = $btn.data('target'); $(target).addClass(addClass).removeClass(removeClass); })

 .day { background: red; } .night { background: yellow; } .day .btn-day, .night .btn-night { display: none; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="training.css"> </head> <body class="day"> <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <button class="js-update btn-day"type="button" name="button" data-target="body" data-addclass="day" data-removeclass="night">day</button> <button class="js-update btn-night" type="button" name="button" data-target="body" data-addclass="night" data-removeclass="day">night</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> </body> </html>

Answer 3

将按钮文本引用移到方法内部

$('button').click(function() {
var buttonText= $('button').text();
    if (buttonText=='day') {
        $('body').css({
            'background':'red'
        })
    $('button').text('night');
} else if (buttonText=='night') {
    $('body').css({
        'background':'yellow'
    }) 
}
})

Answer 4

您只将按钮文本输入到变量一次，因此只能获得初始状态。 对于更改按钮，每次单击按钮时（即在单击处理程序内部），都必须获取按钮文本。

$('button').click(function() { 
    var buttonText= $('button').text(); //get button text each time you click the button
    if (buttonText=='day') { 
        $('body').css({ 'background':'red' }) 
        $('button').text('night');
    } else if (buttonText=='night') { 
        $('body').css({ 'background':'yellow' }) 
    } 
})

否则，如果没有在单击jQuery上运行语句

问题描述

4 个解决方案

解决方案1
1 2018-07-13 21:39:15

解决方案2
1 已采纳 2018-07-13 21:53:05

解决方案3
0 2018-07-13 21:39:03

解决方案4
0 2018-07-13 21:40:33

否则，如果没有在单击jQuery上运行语句

问题描述

4 个解决方案

解决方案1 1 2018-07-13 21:39:15

解决方案2 1 已采纳 2018-07-13 21:53:05

解决方案3 0 2018-07-13 21:39:03

解决方案4 0 2018-07-13 21:40:33

解决方案1
1 2018-07-13 21:39:15

解决方案2
1 已采纳 2018-07-13 21:53:05

解决方案3
0 2018-07-13 21:39:03

解决方案4
0 2018-07-13 21:40:33