Question

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

单击按钮时，按钮文本应更改为 'Pending Request'，使用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');
});

希望这会有所帮助： - ）

Answer 2

你为什么不这样做：

<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>

已经tested。您可以将this传递给属性事件内部函数的参数以定义自身。在这种情况下，this相当于：document.getElementById("InviteTeacher")

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>

Answer 3

您可以使用类名来实现此目的：

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：

$(function(){
    $('div.button_wrapper').on('click', '.InviteTeacher', function(){
        if(this.value == 'Pending Request')
             $(this).val('Invite');
    })
});

工作示例：http://jsfiddle.net/H96sB/1/

<强>更新

用以下代码替换jquery函数：

   function getInvitevalue(idValue){
    $('div.button_wrapper').on('click', '#InviteTeacher'+idValue, function(){
        if(this.value == 'Pending Request')
             $(this).val('Invite');
    });
  }

Answer 4

你可以使用这样的java脚本：

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>
    function getInvitevalue(profileid) {
        //alert(profileid);
        var x = document.getElementById(profileid);
        if (x.value == "Pending Request") x.value = "Invite";
        else x.value = "Pending Request";
    }
</script>

如何通过onclick在jquery中更改按钮文本

4 个答案: