如何使此代码正常工作，以便在单击时更改按钮的文本？

Question

I'm trying to change the text and color of a button when the user clicks it. 我试图在用户单击按钮时更改按钮的文本和颜色。 I am trying to change the text from "Search" to "Close". 我正在尝试将文本从“搜索”更改为“关闭”。 I have attempted to code it, and have posted what I tried in jsfiddle. 我尝试对其进行编码，并发布了我在jsfiddle中尝试过的内容。

now another problem is I can't figure out why jsfiddle isn't running the code, haha, but maybe someone can figure it out regardless of the jsfiddle glitches. 现在另一个问题是我不知道为什么jsfiddle没有运行代码，哈哈，但是也许有人可以弄清楚它，而不管jsfiddle的故障如何。

Without further ado, my code... 事不宜迟，我的代码...

HTML: 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 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 JS

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

}

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

}

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

Answer 1

You have a couple of things you need to change: 您需要更改以下几点：

You need to change the fiddle from onload to No wrap in <body> as @Shaunak correctly commented. 您需要将小提琴从onload更改为No wrap in <body>因为@Shaunak已正确注释。
You need to pass the element if you're not selecting it in the function. 如果未在函数中选择元素，则需要传递该元素。 So you either do onClick="changeHeight($(this))" or inside the JS function you do $(el) . 因此，您可以执行onClick="changeHeight($(this))"或在JS函数内执行$(el) 。
You need to check for el.text() == "Search" and to set using el.text("Close") , since you're checking the text inside and not a value attribute if you're doing el.value (that returns undefined for your example). 您需要检查el.text() == "Search"并使用el.text("Close")进行设置，因为您要检查内部的文本，如果要检查el.value （对于您的示例返回未定义）。
The last glitch is because the button is of type submit , and whenever clicking it the request failed and it overwritten the HTML. 最后一个小故障是因为按钮的类型为submit ，并且每当单击该按钮时，请求都会失败，并且将HTML覆盖。

So, basically: 因此，基本上：

function changeHeight(el) {

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

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

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

        el.text("Search");
    }
}

Fiddle 小提琴

Answer 2

Change your button like: 像这样更改您的按钮：

<button class="btn submit" type="submit" onClick="changeHeight($(this), $('#SearchDiv'));">Search</button>

Change your javascript function like so: 像这样更改您的javascript函数：

function changeHeight(btn, div) 
{
    if (div.is(":visible") )
    {
         btn.val("Search").css("color", "#ffffff"); // Color: White

         div.fadeOut(500);
    }
    else
    {
         btn.val("Close").css("color", "#000000"); // Color: Black

         div.fadeIn(500);
    }
}

Answer 3

Using the css and the text jquery's attributes will do the work: 使用css和text jquery的属性将完成工作：

$(document).ready(function() {
    $('#button_id').click(function(){
        $(this).text('another text')
        $(this).css('height', '100px')
    })
})

Here's a demo 这是一个演示

如何使此代码正常工作，以便在单击时更改按钮的文本？

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-04-11 16:32:33

解决方案2
1 2015-04-11 16:28:42

解决方案3
1 2015-04-11 16:32:13

如何使此代码正常工作，以便在单击时更改按钮的文本？

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-04-11 16:32:33

解决方案2 1 2015-04-11 16:28:42

解决方案3 1 2015-04-11 16:32:13

解决方案1
2 已采纳 2015-04-11 16:32:33

解决方案2
1 2015-04-11 16:28:42

解决方案3
1 2015-04-11 16:32:13