javascript - 使用 jQuery 单击后更改按钮的文本

Question

我一直试图在单击后更改按钮的文本，但它在一个片段中不起作用，而在另一个片段中起作用。

有人可以帮助我了解我的代码中缺少什么吗？

所以第一个有效，但在第二个代码中，按钮文本在单击按钮时不会改变。请帮我。我附上了两个代码片段。

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();
        })
    })
});

.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

<div id="fold">
    <button class="button button1">
        <span id="fold_p">Hide</span>
    </button>
</div>

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Hide ') ? 'Show' : 'Hide').fadeIn();
        })
    })
});

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

<button class="button">
  <div id="fold">
    <span id="fold_p">Hide</span>
  </div>
</button>

谢谢。

Answer 1

如果您切换 JavaScript 控制台(使用 F12)，您将看到第二个 fiddle 中出现错误:

ReferenceError: $ is not defined

这意味着 jQuery 没有作为 $ 变量导入到第二个 fiddle 中

编辑 2:总而言之，我将点击事件移到了按钮上，并通过删除“隐藏”字符串中的尾随空格修复了内联。

编辑 1:您的 js 代码似乎也存在问题，此代码段中的这个正在修复它:

$(document).ready(function () {
    $("button").click(function () {
        $("#fold_p").fadeOut(function () {                  
            $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();
        })
    })
});

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="button">
  <div id="fold">
    <span id="fold_p">Hide</span>
  </div>
</button>