gpt4 book ai didi

javascript - 使用文本方法获取元素的文本,然后检查条件但未获得适当的输出

转载 作者:行者123 更新时间:2023-11-30 14:36:29 25 4
gpt4 key购买 nike

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Assignment Q1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style/style1.css" type="text/css" rel="stylesheet">
<script>
$(document).ready(function() {
$('button').click(function() {
var text = $(this).text();
console.log(text);
if (text == 'night') {
$('body').css('background-color', 'black');
$(this).text('day');
console.log(text);
} else {
$('body').css('background-color', 'white');
$(this).text('night');
console.log(text);

}
});
});
</script>
</head>

<body>

<button>
night
</button>

</body>

</html>

这里发生的事情是,当我第一次点击按钮时没有任何效果,但从第二次点击 wards 开始,代码按预期工作。

我还检查了第一次获取的文本方法输出:

    night

night

第二次点击文本方法后输出:

晚上夜晚天日

无法理解这里发生了什么以及文本方法输出如何自行改变?

最佳答案

问题是 button 在 HTML 中看起来像这样:

  <button>
night
</button>

空格很重要 - 当您在按钮上调用 .text 时,您将获得按钮的所有文本内容,包括空格。

要么一开始不使用任何空格:

<button>night</button>

或者在生成的 text 上调用 .trim():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Assignment Q1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style/style1.css" type="text/css" rel="stylesheet">
<script>
$(document).ready(function() {
$('button').click(function() {
var text = $(this).text();
console.log(text);
if (text.trim() == 'night') {
$('body').css('background-color', 'black');
$(this).text('day');
console.log(text);
} else {
$('body').css('background-color', 'white');
$(this).text('night');
console.log(text);

}
});
});
</script>
</head>

<body>

<button>
night
</button>

</body>

</html>

关于javascript - 使用文本方法获取元素的文本,然后检查条件但未获得适当的输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50364839/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com