Question

我试图从一个使用on click函数的按钮获取id，而不必将对象传递给函数。我一直没有定义而不是id，我不知道为什么，我读过的所有内容都说这应该有效。

<input type="button" value="1" id="one" onclick="return A();"/>
<input type="button" value="2" id="two" onclick="return A();"/>
<input type="button" value="3" id="three" onclick="return A();"/>

<script type='text/javascript'>

function A(){
    var but = $(this).attr("id"); 
    alert(but); 
}    
</script>

http://jsfiddle.net/SM22W/

Answer 1

<input type="button" value="3" id="three" onclick="return A(this);"/>

function A(ele){
    var but = $(ele).attr("id"); 
    alert(but); 
}

然而，因为你已经在使用jQuery了......你也可以这样做：

<input type="button" value="3" id="three" class="buttonClick"/>

$('.buttonClick').on("click", function() {
     var but = $(this).attr("id"); 
     alert(but); 
});

Answer 2

你需要像这样传递obj

<input type="button" value="3" id="three" onclick="return A(this);"/>

function A(obj){
    var but = obj.id; 
    alert(but); 
}

DEMO

Answer 3

绑定事件的jQuery Way™是通过.on()：

<input type="button" value="1" id="one" />
<input type="button" value="2" id="two" />
<input type="button" value="3" id="three" />

<script type='text/javascript'>
    function A(){
        var but = $(this).attr("id"); 
        alert(but); 
    }

    //when the A function is called, jQuery will make sure that `this` points to the
    //element that fired the click event
    $('input[type="button"]').on('click', A);
</script>

如果您 绝对必须 具有内联事件绑定（因为它不受您的控制，或者由于业务需求，几乎没有合理的借口）您可以调用A使用特定上下文执行：

<input type="button" value="1" id="one" onclick="return A.call(this);"/>
<input type="button" value="2" id="two" onclick="return A.call(this);"/>
<input type="button" value="3" id="three" onclick="return A.call(this);"/>

<script type='text/javascript'>
    function A(){
        var but = this.id;
        alert(but); 
    }
</script>

但是如果你要经历所有这些努力，为什么你需要jQuery呢？此外，这些内联事件绑定很难维护，因为有明显的代码重复。

Answer 4

使用this作为A()参数的解决方案是可以的，但在我看来，最好不要使用onclick属性并解除点击处理程序来自HTML的逻辑：

<input type="button" value="1" id="one"/>
<input type="button" value="2" id="two"/>
<input type="button" value="3" id="three"/>

<script type="text/javascript">
    $(document).ready(function() {
        $('input[type="button"]').click(function(event) {
            alert(event.target.id);
        });
    });
</script>

另请注意，您还可以为所有按钮使用css类，并将其与jquery一起使用，以查询要将点击处理程序附加到的按钮。

Answer 5

你这样做的方式（因为你使用的是jQuery我不推荐）就是将元素传递给函数，如：

<input type="button" value="1" id="one" onclick="return A(this);"/>
function A(that){
    var but = that.id; 
    alert(but); 
}

<强> jsFiddle example

由于您正在使用jQuery，请使用以下命令绑定click事件并删除内联JavaScript：

$('input[type="button"]').click(function(){
    alert(this.id); 
})

<强> jsFiddle example

Answer 6

您应该使用jQuery代替onclick属性：

<input type="button" value="1" id="one" class="clickable"/>
<input type="button" value="2" id="two" class="clickable"/>
<input type="button" value="3" id="three" class="clickable"/>

<script type='text/javascript'>
$('.clickable').on('click', function(){
    var $this = $(this); 
    alert(but.prop("id")); 
});
</script>

Answer 7

<input class="A-Button" type="button" value="1" id="one" />
<input class="A-Button" type="button" value="2" id="two" />
<input class="A-Button" type="button" value="3" id="three" />

<script>
(function($) {
    $(function() {
        var A = function (){
            var but = $(this).attr("id"); 
            alert(but);  
        }

        $('.A-Button').click(A);
    });
}(jQuery))
</script>

http://jsfiddle.net/xES5d/

Answer 8

在您的示例中，这指向窗口对象，而不是按钮。因此，要么将按钮对象传递给函数调用（如其他答案中所建议的那样），要么使用jQuery将click事件绑定到按钮。如果您使用后者，那么我认为这将指向您期望的按钮。

例如为： $("#one").click(...); $("#two").click(...); $("#three").click(...);

Answer 9

另一种选择

function A(obj){
alert(obj.getAttribute("id");
}

这是一种使用javascript事件获取任何对象绑定的id的简单方法。你错过了必须像这样传递的论点

<input type="text" onclick="A(this)" />

此指针指向对象本身并作为参数传递，而getAttribute帮助您获取id

Answer 10

我看到你正在使用jQuery。为什么不尝试使用jQuery的事件处理。我经常这样做，而代码的方式是一种非常古老的javascript代码。

您可以为所有输入元素提供一个类：

<input type="button" value="1" id="one" class="dothebtnthing" />
...

在javascript中：

$(document).on('click', '.dothebtnthing', function(event) {
     var but = $(event.currentTarget).attr('id');
     // or this
     //var but = $(event.currentTarget).prop('id');
     alert(but);
});

这应该有效。

jQuery还支持自定义“数据”属性，这些属性允许更容易地将数据扩展到文档对象，即

<input type="button" value="1" data-id="one" class="dothebtnthing" />
...

这允许您为正确的“id”保留id属性，并且可以向所需的元素追加尽可能多的数据。

$(document).on('click', '.dothebtnthing', function(event) {
     var but = $(event.currentTarget).data('id');
     alert(but);
});

产生相同的结果。

Answer 11

<input type="button" value="1" id="one" onclick="return A(this);"/>
<input type="button" value="2" id="two" onclick="return A(this);"/>
<input type="button" value="3" id="three" onclick="return A(this);"/>

<script type='text/javascript'>
function A(e){
    var but = e.id; 
    alert(but); 
}
</script>

获取使用该功能的按钮的ID

11 个答案: