javascript - 我如何使用 Jquery 动态获取所有元素的属性值？

Question

嘿， 我有一个导航菜单，我的代码如下所示。

    <ul id="nav">
        <li><a href = "#countries" >Countries</a></li>
        <li><a href = "#states" id="">States</a></li>
        <li><a href = "#cities">Cities</a></li>
        <li><a href = "#areas">Areas</a></li>
    </ul>

我想根据用户点击动态获取所有属性值，例如，如果用户点击 Countires，它应该获取值 #countries，如果用户点击 states，它应该获取值 #states 等等.

我知道 jQuery 中的 .attr()。这些函数只获取匹配元素集中的第一个元素。无论我在哪里点击它都只会获取#countries。我不想成为这种情况。

我正在使用以下 jquery 代码。

<script type="text/javascript">
$(document).ready(function(){
    //when the user clicks on Navigation Menu call this function
    $('ul#nav li a').click(function(){
        //fetch the attribute value.
        $value = $('ul#nav li a').attr("href");
        alert($value);

        //Stop the default behaviour
        return false;
    });
});
</script>

如何动态获取所有属性值并将值存储在不同的变量中？

Answer 1

这样就可以了:

var $value = $(this).attr('href');

在点击处理程序中，this 值指的是被点击的元素。