javascript - 如何通过jquery中的onclick更改按钮文本

Question

在我的代码中，我有一个按钮文本作为每个用户的“邀请”。

当我点击按钮时，按钮文本应更改为 “待定请求”，通过使用 document.getElementById() 第一个按钮文本正在更改。我的要求是我点击特定按钮文本的所有按钮都应该更改。

但对我来说，当点击其他按钮时，第一个按钮的文字会单独改变。

这是一个编码:

HTML代码:

<div class="button_wrapper">
     <input onclick="getInvitevalue(__iProfId__)" type="button" value="Invite" name="InviteTeacher" class="InviteTeacher" id= "InviteTeacher"/>              
</div> 

Java 脚本代码:

function getInvitevalue(profileid) {
    //alert(profileid);
    var x = document.getElementById("InviteTeacher");
    if (x.value == "Pending Request")
        x.value = "Invite";
    else
        x.value = "Pending Request";
}

我该如何解决

Answer 1

您需要的是该按钮上的切换机制。 jQuery 这样的东西可以解决问题:

$('#InviteTeacher').toggle(function(){
    $(this).val('Pending Request');
}, function(){
    $(this).val('Invite');
});

你可以看看这个工作 FIDDLE .

---

更新:

如果许多类似的按钮需要这种行为，使用 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" />

这对脚本影响不大:

$('.InviteButton').toggle(function(){
    $(this).val('Pending Request');
}, function(){
    $(this).val('Invite');
});

希望这有帮助:-)