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

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

当我点击按钮时，按钮文本应更改为 “挂起的请求”，使用document.getElementById（） 第一个按钮文本正在更改。我的要求是我单击的所有按钮都应该更改特定按钮文本

但对我来说，单击其他按钮时，仅第一个按钮文本会发生变化

下面是一个代码：

Html代码：

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

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

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

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

我如何解决这个问题你为什么不：

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

---

您可以使用类名来实现这一点：

HTML:

工作示例：

更新：

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

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

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

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

将jquery函数替换为以下内容：

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

---

您需要的是该按钮上的切换机制

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

你可以看看这个工作

---

更新：

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

---

希望这有帮助：-）

您可以像这样使用java脚本：

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

Html代码：

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

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

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

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

Java脚本代码：

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

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

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

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

函数getInvitevalue（profileid）{
//警报（profileid）；
var x=document.getElementById（profileid）；
如果（x.value==“未决请求”）x.value=“邀请”；
else x.value=“未决请求”；
}
这是一个JS问题。如果你想要JS回答，考虑一下它的延迟：如果我在HTML表单中使用ID=“InviteTeacher（IpRID）”，它将如何分配每个用户知道的动态ID。对于这个ID，如何使用GeelEntMyIdId（），或者切换，或绑定。在开关中function@AnneTina如果需要选择预定义的ID，可以通过用逗号分隔不同的值（
，
）来包含它们，例如：
$（“#InviteTeacher，#InviteStudent”）
。如果有许多类似的按钮，我建议您使用class属性，因为您确实不想处理许多类似的id。我刚刚更新了我的答案，希望这更接近您想要的。对于我id=“InviteTeacher（profileid），它的输出是id=“InviteTeacher（36）”，id=“InviteTeacher（3）”id=“InviteTeacher（37）”配置文件id是动态的，其值取决于数据库中的用户id。在这种情况下，如何将profile id的动态值传递给教师。在Ajax中，我们发布动态值意味着如何在问题中发布缺少的idIs？请发布所有相关信息，以便每个人都能理解问题所在。如果我在html表单中使用id=“InviteTeacher（iProfId）”，该怎么办。它将为每个用户分配动态id。对于此id，如何使用getElementById（）、切换或绑定。是他们用另一个动态id写id值的机会。是的，我检查了这个网站，他们的工作正常，但对于我的来源，它不工作。对于我id=“InviteTeacher（profileid），它的输出是id=“InviteTeacher（36）”，id=“InviteTeacher（3）”id=“InviteTeacher（37）“配置文件id是动态的，其值取决于数据库中的用户id。在这种情况下，如何将profile id的动态值传递给教师。在Ajax中，我们发布动态值意味着如何发布ID，firebug中会出现什么错误？。您是否将代码放在
document.ready（）
函数之外，因为onclick事件将在jquery
document.ready（）
之前执行。onclick和获取jquery/webforms.js和functions.js文件的控制台错误不会影响我如何在html表单中使用id=“InviteTeacher（iProfId）”。它将为每个用户分配动态id。对于此id，如何使用getElementById（）、切换或绑定。是他们使用另一个动态id写入id值的机会。对于me id=“InviteTeacher（profileid），其输出是id=“InviteTeacher（36）”，id=“InviteTeacher（3）”id=“InviteTeacher（37）“配置文件id是动态的，其值取决于数据库中的用户id。在这种情况下，如何将profile id的动态值传递给教师。在Ajax中，动态值表示如何发布id