我试图在用户单击按钮时更改按钮的文本和颜色。
我正在尝试将文本从“搜索”更改为“关闭”。
我尝试对其进行编码，并发布了我在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;
}
JS
function changeHeight() {
$('#SearchDiv').fadeIn(500);
}
function changeHeight2() {
$('#SearchDiv').fadeOut(200);
}
http://jsfiddle.net/fdkzp9dm/8/
最佳答案
您需要更改以下几点：
由于@Shaunak正确注释，您需要将小提琴从onload更改为No wrap in <body>。
如果未在函数中选择元素，则需要传递该元素。因此，您可以执行onClick="changeHeight($(this))"或在JS函数中执行$(el)。
您需要检查el.text() == "Search"并使用el.text("Close")进行设置，因为您要检查的是内部文本，而不是value属性（如果正在执行el.value（对于示例返回未定义））。
最后一个小故障是因为按钮的类型为submit，每单击一次按钮，请求都会失败，并覆盖HTML。
因此，基本上：
function changeHeight(el) {
$('#SearchDiv').fadeToggle(500);
if (el.text()=="Search") {
el.text("Close");
}
else {
el.text("Search");
}
}
Fiddle