jQuery 文本僅在第二次單擊后更改
[英]jQuery text changing only after second click
問題描述
我是 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>
2 個解決方案
解決方案1
0 2021-10-28 01:14:15
跨度的初始文本在價格周圍有空格，但在要比較的字符串中沒有空格。
您可以使用.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
原因
原因是最初您的價格元素text()是" 19.99 " ，而不是"19.99" 。
" 19.99 " == "19.99" // returns false
這是怎么回事？
因此，當您的點擊處理程序在您第一次點擊時到達這里時，它會進入您的else分支，將其設置為"19.99" 。 由於不會在視覺上改變任何內容，因此您會得到“第一次點擊時沒有任何反應”的印象。
第二次點擊它確實找到了"19.99" ，因此你的比較返回true ，所以這次你的 if-branch 被執行。
最簡單的修復方法
要解決此問題，只需從您的文件中刪除前導和尾隨空格字符
<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>
JQuery .click（）僅在第二次單擊后觸發
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.