时间戳

首页 > 解决方案 > JQuery onclick 函数显示所有锚标记的相同 id

javascript - JQuery onclick 函数显示所有锚标记的相同 id

问题描述

单击每个锚标记时，显示其自己的 ID。但现在我点击每个锚标记然后显示相同的 id check1 。

<div id="test">
        <a class="link" id="check1" href="#">1</a>
        <a class="link" id="check2" href="#">2</a>
        <a class="link" id="check3" href="#">3</a>
        <a class="link" id="check4" href="#">4</a>
        <a class="link" id="check5" href="#">5</a>
        <a class="link" id="check6" href="#">6</a>
        <a class="link" id="check7" href="#">7</a>
    </div>


<script>
        $(document).ready(function(){
            $('#test a').click(function(){
                var ids=$('a').attr('id');
                alert(ids);

            });
        });
    </script>

标签： javascriptjqueryhtml

解决方案

使用$(this).attr('id'). 问题出$('a').attr('id')在获取元素的代码id中。<a>因为，有多个<a>元素，它考虑第一个<a>元素并采用它的id. Using$(this)将获取<a>被点击元素的范围。您甚至可以this.id在 click 函数内部使用。

$(document).ready(function(){
    $('#test a').click(function(){
        var ids=$(this).attr('id');
        alert(ids);

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
    <a class="link" id="check1" href="#">1</a>
    <a class="link" id="check2" href="#">2</a>
    <a class="link" id="check3" href="#">3</a>
    <a class="link" id="check4" href="#">4</a>
    <a class="link" id="check5" href="#">5</a>
    <a class="link" id="check6" href="#">6</a>
    <a class="link" id="check7" href="#">7</a>
</div>

推荐阅读