1

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

当我单击按钮时，按钮文本应更改为“待处理请求”，通过使用 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";
}

我该如何解决这个问题

4

4 回答 4

3

您需要的是该按钮上的切换机制。像这样使用 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');
});

希望这可以帮助 ：-）

于 2013-07-17T04:13:20.760 回答
1

你可以像这样使用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>
于 2013-07-17T05:03:28.407 回答
0

你为什么不这样做：

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

它已经过测试。您可以传递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>
于 2013-07-17T03:51:34.420 回答
0

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

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');
    });
  }
于 2013-07-17T04:04:28.837 回答