jQuery 如何通过jquery中的onclick更改按钮文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17690755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change button text by onclick in jquery
提问by Anne Tina
In my coding, I have a button Text as "Invite" for each user.
在我的编码中，我有一个按钮文本作为每个用户的“邀请”。
When I on click the button, the button text should be change as 'Pending Request", by using document.getElementById() the first button text is changing. What my requirement is what all the button I am clicking the particular button text should be change.
当我单击按钮时，按钮文本应更改为“待处理请求”，通过使用 document.getElementById() 第一个按钮文本正在更改。我的要求是我单击特定按钮文本的所有按钮应该是什么改变。
But for me the First button text alone changing when clicking other buttons.
但对我来说，当单击其他按钮时，第一个按钮文本会发生变化。
Here is a coding:
这是一个编码：
Html code:
html代码：
<div class="button_wrapper">
<input onclick="getInvitevalue(__iProfId__)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>
</div>
Java Script code:
Java脚本代码：
function getInvitevalue(profileid) {
//alert(profileid);
var x = document.getElementById("InviteTeacher");
if (x.value == "Pending Request")
x.value = "Invite";
else
x.value = "Pending Request";
}
How I can resolve this
我如何解决这个问题
回答by Frederik.L
What you need is a toggle mechanic on that button. Something like this with jQuery would do the trick:
您需要的是该按钮上的切换机制。像这样的 jQuery 可以解决这个问题：
$('#InviteTeacher').toggle(function(){
$(this).val('Pending Request');
}, function(){
$(this).val('Invite');
});
You can take a look at this working FIDDLE.
你可以看看这个工作的FIDDLE。
UPDATE:
更新：
If you need this behavior for many similar buttons, using the class attribute would be a much nicer choice than the id attribute. In that case, you could have a markup like this:
如果许多类似的按钮需要这种行为，使用 class 属性将是比 id 属性更好的选择。在这种情况下，您可以使用如下标记：
<input type="button" value="Invite" name="InviteTeacher" class="InviteButton" />
<input type="button" value="Invite" name="InviteStudent1012" class="InviteButton" />
<input type="button" value="Invite" name="InviteStudent2230" class="InviteButton" />
<input type="button" value="Invite" name="InviteStudent3125" class="InviteButton" />
That will have little effect on the script:
这对脚本几乎没有影响：
$('.InviteButton').toggle(function(){
$(this).val('Pending Request');
}, function(){
$(this).val('Invite');
});
Hope this helps :-)
希望这可以帮助 ：-）
回答by Shawn31313
Why don't you just do:
你为什么不这样做：
<div class="button_wrapper">
<input onclick="getInvitevalue(123)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher123" id= "InviteTeacher"/>
</div>
<script type="text/javascript">
function getInvitevalue(id) {
var button = document.getElementsByClassName("InviteTeacher" + id)[0];
if (button.value === "Pending Request") {
button.value = "Invite";
} else {
button.value = "Pending Request";
}
}
</script>
It has been tested. You can pass thisinto the parameter of a function inside of attribute event to define itself. In this case, thisis equivalent to: document.getElementById("InviteTeacher")
它已经过测试。您可以this在属性事件中传入函数的参数来定义自身。在这种情况下，this相当于：document.getElementById("InviteTeacher")
Script in jQuery (it is tagged):
jQuery 中的脚本（已标记）：
<div class="button_wrapper">
<input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher123" id= "InviteTeacher"/>
</div>
<script type="text/javascript">
$("input[class^='InviteTeacher']").bind("click", function () {
var button = $(this);
if (button.val() === "Pending Request") {
button.val("Invite");
} else {
button.val("Pending Request");
}
});
</script>
回答by Dinesh
You could use class name for achieving this:
您可以使用类名来实现这一点：
HTML:
HTML：
<div class="button_wrapper">
<input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher1"/>
<input type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher2"/>
<input type="button" value="Pending Request" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher3"/>
</div>
JS:
JS：
$(function(){
$('div.button_wrapper').on('click', '.InviteTeacher', function(){
if(this.value == 'Pending Request')
$(this).val('Invite');
})
});
Working example: http://jsfiddle.net/H96sB/1/
工作示例：http: //jsfiddle.net/H96sB/1/
Update:
更新：
Replace the jquery function with this:
用这个替换 jquery 函数：
function getInvitevalue(idValue){
$('div.button_wrapper').on('click', '#InviteTeacher'+idValue, function(){
if(this.value == 'Pending Request')
$(this).val('Invite');
});
}
回答by Neeraj Singh
You can use java script like this:
您可以像这样使用java脚本：
Html Code:
html代码：
<div class="button_wrapper">
<input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher" />
<input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher(36)" />
<input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher(37)" />
<input onclick="getInvitevalue(this.id)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id="InviteTeacher(3)" />
</div>
Java Script Code:
Java脚本代码：
<script>
function getInvitevalue(profileid) {
//alert(profileid);
var x = document.getElementById(profileid);
if (x.value == "Pending Request") x.value = "Invite";
else x.value = "Pending Request";
}
</script>
