选择一个刚刚被点击的元素 JQuery答案

【问题标题】：Selecting an element that has just been clicked JQuery选择一个刚刚被点击的元素 JQuery
【发布时间】：2018-03-21 23:13:03
【问题描述】：

我有一个 <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>标签的data-ID？

【问题讨论】：

您的事件处理程序在哪里？
试试这个api.jquery.com/data

标签： javascript jquery html

【解决方案1】：

我们开始吧：

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

这里是.data()属性的documentation。

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

【讨论】：

用数据文档更新了答案

【解决方案2】：

您可以为此使用“.click()”。检查下面的sn-p..

$('.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>

【讨论】：

【解决方案3】：

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

要将值的属性作为字符串检索而不进行任何转换，请使用 attr() 方法。

【讨论】：

如果您要建议使用.attr() 作为data- 属性，那么您应该详细说明.attr() 和.data() 之间的区别以及为什么您不会在此使用.data()案例。
刚刚看到您的其他评论 - 也许是快速搜索？ stackoverflow.com/questions/7261619/jquery-data-vs-attr

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

在a元素容器div<div class="group popOutDisplay"上绑定点击事件监听器。原因是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
    }
});

【讨论】：