我是javascript和jQuery的新手，我很难找到我的代码出了什么问题。我写了一个非常简单的脚本，应该改变一个跨度的文本点击，但我必须做两次点击，使其工作。我有一个滑块，滑块在点击时工作得很好，所以我知道它在第一次点击时工作，但文本需要两次点击才能改变，两个事件应该一起发生。这是代码:
$(document).ready(function() {
$(".slider").click(function() {
$(".btn").toggleClass("movement");
var newPrice1 = "59.99";
if ($(".price1-span").text() == "19.99") {
$(".price1-span").text(newPrice1)
} else {
$(".price1-span").text("19.99");
}
});
});/* GENERAL */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background-image: url(/bbbackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
hr {
width: 50%;
margin: 0px auto;
}
/* H1 */
h1 {
text-align: center;
margin: 4vh auto 30px auto;
color: #0B3142;
}
/* DECISION */
.decision {
display: flex;
justify-content: center;
margin-bottom: 30px;
color: #0B3142;
}
/* SLIDER & SLIDER BTN */
.slider {
height: 20px;
width: 40px;
margin: auto 20px;
background-color: #0F5257;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.btn {
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
.movement {
left: 20px;
}
/* PLAN CONTAINER */
#container {
display: flex;
justify-content: center;
}
#container div {
border: 2px solid black;
border-radius: 10px;
}
/* BASIC, PROFESSIONAL, DIAMOND */
.basic {
padding: 50px 40px;
background-color: rgb(238, 238, 238, 80%);
text-align: center;
line-height: 40px;
transition: .5s;
}
.basic:hover {
transform: scale(1.05);
background-color: #114b66;
color: white;
}
.basic:hover h3 {
color: white;
}
.basic:hover button {
color: black;
box-shadow: 0px 5px 5px black;
}
/* BASIC H3 */
.basic h3 {
color: #114b66;
margin-top: -50px;
}
.basic h2 {
font-size: 45px;
margin-bottom: 20px;
}
.red {
color: red;
}
/* SPAN DOLLAR SIGN */
.price {
margin-top: 15px;
font-size: 20px !important;
}
.price1-span {
font-size: 45px !important;
}
/* LEARN MORE BUTTON */
button {
margin-top: 100px;
width: 160px;
height: 40px;
background-color: #1d8e96;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 10px;
border-style: none;
box-shadow: 0px 5px 5px rgb(151, 151, 151);
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Pricing Component </title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<h1> Limited Time Offer! </h1>
<div class="decision">
<p> Monthly </p>
<div class="slider">
<div class="btn"></div>
</div>
<p> Anually </p>
</div>
<div id="container">
<div class="basic">
<h3> Master Plan </h3>
<h2 class="price"> $ <span class="price1-span"> 19.99 </span></h2>
<hr>
<p> 1 TB Storage </p>
<hr>
<p> 5 Sites Allowed </p>
<hr>
<p> Free email account </p>
<hr>
<p> Full Account Access </p>
<hr>
<button> learn more </button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>原因
原因是最初您的价格元素text()是" 19.99 "，而不是"19.99"。
" 19.99 " == "19.99" // returns false
怎么回事?
因此，当您的单击处理程序在您第一次单击时到达这里时，它进入您的else分支，将其设置为"19.99"。因为它在视觉上没有改变任何东西，你得到的印象是"第一次点击什么也没有发生"。
第二次点击它确实找到"19.99"，因此你的比较返回true，所以这次你的if分支被执行。
最简单的修复方法
要解决这个问题，只需从
中删除前后空格字符即可。<span class="price1-span"> 19.99 </span>
最后是
<span class="price1-span">19.99</span>
$(document).ready(function() {
$(".slider").click(function() {
$(".btn").toggleClass("movement");
var newPrice1 = "59.99";
if ($(".price1-span").text() == "19.99") {
$(".price1-span").text(newPrice1)
} else {
$(".price1-span").text("19.99");
}
});
});/* GENERAL */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background-image: url(/bbbackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
hr {
width: 50%;
margin: 0px auto;
}
/* H1 */
h1 {
text-align: center;
margin: 4vh auto 30px auto;
color: #0B3142;
}
/* DECISION */
.decision {
display: flex;
justify-content: center;
margin-bottom: 30px;
color: #0B3142;
}
/* SLIDER & SLIDER BTN */
.slider {
height: 20px;
width: 40px;
margin: auto 20px;
background-color: #0F5257;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.btn {
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
.movement {
left: 20px;
}
/* PLAN CONTAINER */
#container {
display: flex;
justify-content: center;
}
#container div {
border: 2px solid black;
border-radius: 10px;
}
/* BASIC, PROFESSIONAL, DIAMOND */
.basic {
padding: 50px 40px;
background-color: rgb(238, 238, 238, 80%);
text-align: center;
line-height: 40px;
transition: .5s;
}
.basic:hover {
transform: scale(1.05);
background-color: #114b66;
color: white;
}
.basic:hover h3 {
color: white;
}
.basic:hover button {
color: black;
box-shadow: 0px 5px 5px black;
}
/* BASIC H3 */
.basic h3 {
color: #114b66;
margin-top: -50px;
}
.basic h2 {
font-size: 45px;
margin-bottom: 20px;
}
.red {
color: red;
}
/* SPAN DOLLAR SIGN */
.price {
margin-top: 15px;
font-size: 20px !important;
}
.price1-span {
font-size: 45px !important;
}
/* LEARN MORE BUTTON */
button {
margin-top: 100px;
width: 160px;
height: 40px;
background-color: #1d8e96;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 10px;
border-style: none;
box-shadow: 0px 5px 5px rgb(151, 151, 151);
color: white;
}<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<h1> Limited Time Offer! </h1>
<div class="decision">
<p> Monthly </p>
<div class="slider">
<div class="btn"></div>
</div>
<p> Anually </p>
</div>
<div id="container">
<div class="basic">
<h3> Master Plan </h3>
<h2 class="price"> $ <span class="price1-span">19.99</span></h2>
<hr>
<p> 1 TB Storage </p>
<hr>
<p> 5 Sites Allowed </p>
<hr>
<p> Free email account </p>
<hr>
<p> Full Account Access </p>
<hr>
<button> learn more </button>
</div>
</div>span的初始文本在price周围有空格，但是在要比较的字符串中没有。
您可以使用.trim()来删除周围的空白。
$(document).ready(function() {
$(".slider").click(function() {
$(".btn").toggleClass("movement");
var newPrice1 = "59.99";
if ($(".price1-span").text().trim() == "19.99") {
$(".price1-span").text(newPrice1)
} else {
$(".price1-span").text("19.99");
}
});
});/* GENERAL */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
background-image: url(/bbbackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
hr {
width: 50%;
margin: 0px auto;
}
/* H1 */
h1 {
text-align: center;
margin: 4vh auto 30px auto;
color: #0B3142;
}
/* DECISION */
.decision {
display: flex;
justify-content: center;
margin-bottom: 30px;
color: #0B3142;
}
/* SLIDER & SLIDER BTN */
.slider {
height: 20px;
width: 40px;
margin: auto 20px;
background-color: #0F5257;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.btn {
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
.movement {
left: 20px;
}
/* PLAN CONTAINER */
#container {
display: flex;
justify-content: center;
}
#container div {
border: 2px solid black;
border-radius: 10px;
}
/* BASIC, PROFESSIONAL, DIAMOND */
.basic {
padding: 50px 40px;
background-color: rgb(238, 238, 238, 80%);
text-align: center;
line-height: 40px;
transition: .5s;
}
.basic:hover {
transform: scale(1.05);
background-color: #114b66;
color: white;
}
.basic:hover h3 {
color: white;
}
.basic:hover button {
color: black;
box-shadow: 0px 5px 5px black;
}
/* BASIC H3 */
.basic h3 {
color: #114b66;
margin-top: -50px;
}
.basic h2 {
font-size: 45px;
margin-bottom: 20px;
}
.red {
color: red;
}
/* SPAN DOLLAR SIGN */
.price {
margin-top: 15px;
font-size: 20px !important;
}
.price1-span {
font-size: 45px !important;
}
/* LEARN MORE BUTTON */
button {
margin-top: 100px;
width: 160px;
height: 40px;
background-color: #1d8e96;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 10px;
border-style: none;
box-shadow: 0px 5px 5px rgb(151, 151, 151);
color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Pricing Component </title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<h1> Limited Time Offer! </h1>
<div class="decision">
<p> Monthly </p>
<div class="slider">
<div class="btn"></div>
</div>
<p> Anually </p>
</div>
<div id="container">
<div class="basic">
<h3> Master Plan </h3>
<h2 class="price"> $ <span class="price1-span"> 19.99 </span></h2>
<hr>
<p> 1 TB Storage </p>
<hr>
<p> 5 Sites Allowed </p>
<hr>
<p> Free email account </p>
<hr>
<p> Full Account Access </p>
<hr>
<button> learn more </button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>