我遇到了关于按钮点击的问题。在下面的代码中，当我单击按钮时，条件检查按钮的文本是否等于“day”，然后将“body”的“background-color”更改为“red”以及“按钮”到“晚上”。在这里，如果单击带有夜间文本的按钮，我想再次将主体背景颜色和按钮文本更改为第一个。我真的很困惑。
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>最佳答案
这里有很多从根本上来说是个坏主意的编程。您应该避免使用基于表示(html 值)的逻辑。您还应该避免对 html 元素进行值更改 (css)。
相反，您的逻辑应该基于元素的类，您的演示文稿也应该基于类。
请阅读Decoupling Your HTML, CSS, and 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>关于javascript - else if 语句没有在点击 jquery 时运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51333081/