选择刚刚单击过JQuery的元素

Question

我有一个<div>包含<a>标签和更多div：

        <div>
            <div class="icons">
                <div class="group popOutDisplay">
                    <a href="#" data-id="128910"><i class="fa fa-home"></i></a>
                    <a href="#" data-id="239019"><i class="fa fa-search"></i></a>
                    <a href="#" data-id="346653"><i class="fas fa-bicycle"></i></a>
                </div>
                <div class="group">
                    <a href="#"><i class="fa fa-globe"></i></a>
                </div>
                <div class="group bottom">
                    <a href="#"><i class="fa fa-trash"></i></a>
                </div>
            </div>
            <div class="content">
                <div id="128910";>
                    <p>some content</p>
                </div>
                <div id="239019";>
                </div>
                <div id="346653";>
                </div>
            </div>
       </div>

我试图用jquery选择锚标签上的数据属性，这样我就可以在<div class="content">中显示具有相同ID的<div>标签（如果有意义的话）。

到目前为止，我已经能够识别数据ID

$(".group.popOutDisplay a")[0].attributes[1].value;

但由于[0]索引，这只给出了第一个元素的ID。

tldr：如何获取刚刚点击的<a>标签的数据ID？

Answer 1

开始了：

$('.popOutDisplay a').click(function(e) {
    e.preventDefault();
    console.log($(this).data('id'));
});

这里是.data()属性的文档 。

演示： https ： //jsfiddle.net/ru4pjz3c/2/

Answer 2

你可以使用“.click（）”。 检查下面的代码段..

 $('.popOutDisplay a').click(function(e){ e.preventDefault(); var elID = $(this).data('id'); console.log(elID); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div> <div class="icons"> <div class="group popOutDisplay"> <a href="#" data-id="128910"><i class="fa fa-home"></i></a> <a href="#" data-id="239019"><i class="fa fa-search"></i></a> <a href="#" data-id="346653"><i class="fas fa-bicycle"></i></a> </div> <div class="group"> <a href="#"><i class="fa fa-globe"></i></a> </div> <div class="group bottom"> <a href="#"><i class="fa fa-trash"></i></a> </div> </div> <div class="content"> <div id="128910";> <p>some content</p> </div> <div id="239019";> </div> <div id="346653";> </div> </div> </div> 

Answer 3

$(".group a").click(function(){
     var data=$(this).attr("data-id");
     alert(data)
});

要将值的属性检索为字符串而不尝试转换它，请使用attr（）方法。

Answer 4

$(document).on("click", "[data-id]", function (event){
    event.preventDefault();
    var id = $(this).attr("data-id");

    // Apply your logic here
    // $("#" + id)
});

Answer 5

在a元素容器div <div class="group popOutDisplay"上绑定click事件监听器。 其原因是因为在click事件a元素将泡沫最多的div容器。

就像是

$('.group.popOutDisplay').bind('click', function(e) {
    var target = e.target;
    if (target.tagName.toLowerCase() === 'a') {
        e.preventDefault(); //prevent the default action of navigating to the url
        var id = target.dataset.id;
        //you now have the id;
        $('#' + id).css('display', 'block'); //display the div
    }
});