javascript - 我如何使这段旨在在单击时更改按钮文本的代码正常工作？-6ren

javascript - 我如何使这段旨在在单击时更改按钮文本的代码正常工作？

转载作者：太空宇宙更新时间：2023-11-03 21:30:44

我正在尝试在用户单击按钮时更改按钮的文本和颜色。我正在尝试将文本从“搜索”更改为“关闭”。我试图对其进行编码，并发布了我在 jsfiddle 中尝试过的内容。

现在另一个问题是我无法弄清楚为什么 jsfiddle 没有运行代码，哈哈，但不管 jsfiddle 故障如何，也许有人可以弄清楚。

事不宜迟，我的代码...

HTML:

<form>
  <p>

      <button class="btn submit" type="submit" onClick="changeHeight();">Search</button>


      <button class="btn cancel" onClick="changeHeight2();">Reset</button>  

      <div id="SearchDiv">Here I am</div>

    </p>
</form>

CSS

p{
  text-align:center;
  background-color: rgb(222,222,222);
}
.btn{
  margin-top:10px;
  margin-bottom:10px;
  font-size: 22px;
  color:rgb(255,255,255);
  width: 150px;
  height: 60px;
  outline: none;
  border-radius:5px;
  border:0;
}
.submit{
 background-color: rgb(44,228,191);
}
.submit:hover{
  background-color:  rgb(24, 188, 156)!important;
}
.submit:active{
   background-color: rgb(15,121,100)!important;
}
.cancel{
    background-color: rgb(244,123,130);
}
.cancel:hover{
    background-color: rgb(237,28,36)!important;
}
.cancel:active{
    background-color: rgb(154,12,19)!important;
}





#SearchDiv {
  background-color:purple;
  height:50px;
  display:none;
}

function changeHeight() {
    $('#SearchDiv').fadeIn(500);

}

function changeHeight2() {
    $('#SearchDiv').fadeOut(200);

}

http://jsfiddle.net/fdkzp9dm/8/

最佳答案

您有几处需要更改:

您需要从 onload 更改 fiddle 至 No wrap in <body>正如@Shaunak 正确评论的那样。
如果您没有在函数中选择它，则需要传递该元素。所以你要么做onClick="changeHeight($(this))"或者在你做的 JS 函数里面 $(el) .
您需要检查 el.text() == "Search"并使用 el.text("Close") 进行设置，因为如果你正在做 el.value，你正在检查里面的文本而不是值属性(对于您的示例返回 undefined)。
最后一个故障是因为按钮的类型是 submit ，每当单击它时，请求都会失败并覆盖 HTML。

所以，基本上:

function changeHeight(el) {

    $('#SearchDiv').fadeToggle(500);  

    if (el.text()=="Search")  {

        el.text("Close");
    }
    else {

        el.text("Search");
    }
}

Fiddle

关于javascript - 我如何使这段旨在在单击时更改按钮文本的代码正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29580144/