jQuery 文本仅在第二次单击后更改
[英]jQuery text changing only after second click
问题描述
I'm new to javascript and jQuery, and I'm having trouble finding what's wrong with my code.
我是 javascript 和 jQuery 的新手，我无法找到我的代码有什么问题。 I've written a very simple script that's supposed to change the text of a span on click, but I have to do two clicks to make it work.我编写了一个非常简单的脚本，它应该在单击时更改跨度的文本，但是我必须单击两次才能使其工作。 I have a slider, and the slider works perfectly on click, so I know that it's working on the first click, yet the text takes two clicks to change, and the two events are supposed to happen together.我有一个滑块，并且滑块在单击时可以完美运行，所以我知道它在第一次单击时起作用，但是文本需要单击两次才能更改，并且这两个事件应该一起发生。 This is the code:这是代码：
$(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>
2 个解决方案
解决方案1
0 2021-10-28 01:14:15
The initial text of the span has spaces around the price, but you don't have that in the string you're comparing with.跨度的初始文本在价格周围有空格，但在要比较的字符串中没有空格。
You can use .trim() to remove surrounding whitespace.您可以使用.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>
解决方案2
0 已采纳 2021-10-28 01:15:23
Cause原因
The reason is that initially your price elements text() is " 19.99 " , not "19.99" .原因是最初您的价格元素text()是" 19.99 " ，而不是"19.99" 。
" 19.99 " == "19.99" // returns false
What's going on?这是怎么回事？
So when your click handler arrives here on your first click, it goes into your else branch, setting it to "19.99" .因此，当您的点击处理程序在您第一次点击时到达这里时，它会进入您的else分支，将其设置为"19.99" 。 Since doesn't change anything visually, you get the impression that "nothing happens on first click".由于不会在视觉上改变任何内容，因此您会得到“第一次点击时没有任何反应”的印象。
2nd click it does find "19.99" , thus your comparison returns true , so this time your if-branch is executed.第二次点击它确实找到了"19.99" ，因此你的比较返回true ，所以这次你的 if-branch 被执行。
Simplest way to fix it最简单的修复方法
To fix the issue, simply remove the leading and trailing space character from your要解决此问题，只需从您的文件中删除前导和尾随空格字符
<span class="price1-span"> 19.99 </span>
so you end up with所以你最终得到
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JQuery .click（）仅在第二次单击后触发 - JQuery .click() triggers after the second click only
jQuery仅在第二次单击后提交工作 - jQuery submit working after second click only
Jquery.remove() 仅在第二次点击后起作用 - Jquery .remove() only acts on second click and after
jQuery Sortable仅在第二次单击后触发 - Jquery Sortable only fires after second click
jquery - 单击时更改按钮的文本仅在第二次单击时起作用 - jquery - change button's text on click works only on second click
jQuery click事件仅在第二次单击后才起作用 - jQuery click event works only after second click
jQuery 数据属性仅在第二次单击后更新 - jQuery data attribute updates only after second click
jQuery空仅适用于AJAX调用后的第二次单击 - jQuery empty only works on the second click after an AJAX call
jQuery：删除的div仅在第二次单击后才能排序 - JQuery: dropped divs are sortable only after second click
jQuery remove仅在AJAX调用后的第二次单击上起作用 - jQuery remove only works on the second click after an AJAX call
相关标签