15

我需要获取点击的 div 的 ID。

现在，当我单击状态类时，我返回了一个未定义的 id。

这是我的javascript代码

jQuery(document).ready(function() {
    $(".status").bind('click', $.proxy(function() {
        var status = $(this).attr('id');
        alert(status);
    }, this));
});​

和 HTML

<div class="status" id="s_1">111111</div>
<div class="status" id="s_3">33333</div>
<div class="status" id="s_2">222222</div>

我应该如何获得正确的 id 值？

4

7 回答 7

26

我不确定你为什么使用 $.proxy。删除它应该会给你想要的结果。

$('.status').click(function(event) {
    var status = $(this).attr('id');
});

如果您仍想使用代理，您可以通过以下方式访问单击的元素event.currentTarget

$(".status").bind('click', $.proxy(function(event) {
    var status = $(event.currentTarget).attr('id');
    alert(status);
}, this));
于 2012-06-28T16:26:04.547 回答
5

怎么样：

$('div').on('click', function(){
    alert($(this).attr("id"));
});

这是否只适用于具有类的 div status？如果是这样，请尝试：

$('div.status').on('click', function(){
    alert($(this).attr("id"));
});
于 2012-06-28T16:27:15.627 回答
2

使用 event.target 来引用该元素

jQuery(document).ready(function() {
        $(".status").bind('click', $.proxy(function(event) {
            var status = $(event.target).attr('id');
          alert(status);
    }, this));
});

看实际操作：http: //jsfiddle.net/vNaqR/

于 2012-06-28T16:31:44.890 回答
1 

$(document).ready(function() {
  $(".divField").click(function() {
    alert("id : " + $(this).attr("id"));
  });

});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <h1>For finding id click below text</h1>
  <div id="id1" value="Example 1" class="divField">My id is <b>id1</b></div>
  <div id="id2" value="Example 2" class="divField">My id is <b>id2</b></div>

</body>

</html>

于 2017-07-19T08:51:51.977 回答
0

代理问题的解释：

使用 $.proxy() 时要小心。它使用指定的上下文（此处为参数 2）而不是使用触发事件的上下文来调用函数（此处为参数 1）。

在主要问题中，指定的上下文是 $(document) 所以。这样，函数会尝试获取文档的 ID，而不是触发事件的对象的 ID（$('.status') 元素）。

于 2013-10-03T13:15:47.330 回答
0 
$('selector').each(function(){
    $(this).click(function(){
        alert($(this).attr('id'))
    });
});
于 2013-06-06T07:23:18.157 回答
0

当我单击按钮时，我试图显示隐藏的 div，然后每次用户单击按钮时都会显示更多索引。

那是行不通的，因为如果我处于添加模式而不是编辑（编辑时显示 div），列表上总是空的

                       <li>
                        <button type="button" name="addAnotherButton" class="btnFwd gradient smButtonStyling" 
                        onClick="showInput();">
                            <img src="/Common/web/static/images/add.png" class="smbtnIcon" />
                            Add Another 
                    </button>
                </li>

                <li>
                           <c:forEach items="${planInfoList}" var="planInfo" varStatus="status">
                        <div id="uploadBody[${status.index}]" style='display = none'>
                            <label class="adminFormLabel">Title:</label>
                            <form:input path="planInfoList[${status.index}].title" onfocus="this.select();" maxlength="50" size="30"/>
                            <label class="adminFormLabel">Plan Number:</label>
                            <form:input path="planInfoList[${status.index}].planNumber" size="10" maxlength="10"/>
                        </div>
                    </c:forEach>
                </li>

JS：

var found = 0;
    if ($('#uploadBody' + i).hide()) {
        for (var i = 0; i < 5; i++) {
            if (found == 0) {
                $('#uploadBody' + i).show();
            }
            found++;
        }       
        }
于 2017-03-24T16:00:22.293 回答