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），则会看到第二个小提琴出现错误：

ReferenceError: $ is not defined

这意味着jQuery不会在第二个小提琴中作为$变量导入

编辑2：总而言之，我将click事件移到了按钮上，并且通过删除'Hide'字符串中的尾部空格来修复内联。

编辑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>

Answer 2

您的Java脚本中有一个错误：

 $("#fold_p").text(($("#fold_p").text() == 'Hide ') ? 'Show' : 'Hide').fadeIn();//note the space after 'Hide '

应为：

 $("#fold_p").text(($("#fold_p").text() == 'Hide') ? 'Show' : 'Hide').fadeIn();//no space after 'Hide'

Answer 3

也许是这样的：

$(document).ready(function () {
    $("#fold").click(function () {        
        $("#fold_p").fadeOut(function () {
           var btn_text= '';
           if($("#fold_p").text() == 'Hide'){
              btn_text = 'Show';
           }else{
              btn_text = 'Hide';
           }        
           $("#fold_p").text(btn_text).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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="fold">
    <button class="button button1">
        <span id="fold_p">Hide</span>
    </button>
</div>

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

3 个答案: