Question

以下是我的div：

<div class="grey-column" id="infoblock1" data-type="datahere"></div>
<div class="green-column" id="infoblock2" data-type="datahere"></div>
<div class="red-column" id="infoblock3" data-type="datahere"></div>

我试图找出被点击的元素的id，我有这个代码：

$(function(){
    $('.green-column, .red-column, .grey-column').click(function() { 
         id_clicked = this.id; 
         var id_final = '#';
         id_final += id_clicked;
         $("<div>" + $(id_final).attr("data-type") + "</div>").dialog();
    });
});

因此，每当用户单击div时，将触发click函数，并找到单击该元素的id。但attr（）函数似乎不适用于此。请帮帮我。

Answer 1

由于this是点击的DOM元素，因此您无需间接通过id来获取其属性。只是：

$(function(){
    $('.green-column, .red-column, .grey-column').click(function() { 
         $("<div>" + $(this).attr("data-type") + "</div>").dialog();
    });
});

Example Fiddle

但是，由于您的代码does work提供的不是严格模式（除非通过不声明id_clicked变量而成为The Horror of Implicit Globals的牺牲品），否则您需要查看JavaScript控制台等，以了解 else 正在发生什么阻止它正常工作。

Answer 2

尝试：

$(function(){
 $('.green-column, .red-column, .grey-column').click(function() { 
     $("<div>" + $(this).data("type") + "</div>").dialog();
 });
});

要使点击的元素使用$(this)并使data-type值使用.data()

Answer 3

试试这个：

$(function(){
    $("div").click(function(){
        var div_id = $(this).attr("id");
        $("<div>" + $("#"+div_id).attr("data-type") + "</div>").dialog();
    });
});

演示：http://jsfiddle.net/7gxeY/1/

使用jquery选择元素的id

3 个答案: