jQuery点击slider后span文本仅第二次点击才变更问题求助

问题根因 #

你的HTML里.price1-span标签的文本前后自带了空格，对应HTML片段如下：

<span class="price1-span"> 19.99 </span>

你在JS中直接用.text() == "19.99"做判断，第一次点击时拿到的文本实际是" 19.99 "（前后带空格），和你判断的字符串不匹配，所以会走else分支把文本改成"19.99"，第二次点击时判断才会命中，就出现了需要点两次才会切换到59.99的情况。

修复方案 #

只需要在获取文本后调用trim()方法去除前后空白字符即可，修改后的JS代码如下：

$(document).ready(function() {
  $(".slider").click(function() {
    $(".btn").toggleClass("movement");
    var newPrice1 = "59.99";
    // 新增trim()去除前后空格
    if ($(".price1-span").text().trim() == "19.99") {
      $(".price1-span").text(newPrice1)
    } else {
      $(".price1-span").text("19.99");
    }
  });
});

更稳妥的优化方案 #

你也可以直接根据滑块是否有movement类来判断当前状态，避免文本判断容易出问题的情况：

$(document).ready(function() {
  $(".slider").click(function() {
    const $btn = $(".btn");
    $btn.toggleClass("movement");
    // 按滑块状态判断价格
    $(".price1-span").text($btn.hasClass("movement") ? "59.99" : "19.99");
  });
});

内容的提问来源于stack exchange，提问作者Twelveoclock