stackoom
  简体   繁体   中英

jQuery text changing only after second click

 原文  2021-10-28 01:08:27  0   2    javascript/ html/ jquery

Question

I'm new to javascript and jQuery, and I'm having trouble finding what's wrong with my code. 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 answers

solution1
 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. 

 $(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>

solution2
 0 ACCPTED  2021-10-28 01:15:23

Cause

The reason is that initially your price elements text() is " 19.99 " , not "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" . 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.

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question JQuery .click() triggers after the second click only jQuery submit working after second click only Jquery .remove() only acts on second click and after Jquery Sortable only fires after second click jquery - change button's text on click works only on second click jQuery click event works only after second click jQuery data attribute updates only after second click jQuery empty only works on the second click after an AJAX call JQuery: dropped divs are sortable only after second click jQuery remove only works on the second click after an AJAX call
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM