jQuery onclick函数显示所有锚标签的相同ID

时间:2018-06-28 06:57:23

标签: javascript jquery html

当单击每个锚标记时,然后显示其自己的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>

1 个答案:

答案 0 :(得分:2)

使用$(this).attr('id')。问题出在代码$('a').attr('id')中,它获取了id元素的<a>。由于存在多个<a>元素,因此它考虑第一个<a>元素并采用其id。使用$(this)将获得单击的<a>元素的范围。您甚至可以在点击功能内使用this.id

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