单击时获取 <li> 值属性？

Question

我正在尝试做一些我认为应该相当简单的事情。我在导航栏上使用 Bootstrap，在单击时使用 jQuery 查找（下拉菜单）列表项。事件正确触发，但 'value' 始终返回为未定义。

导航栏代码：

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Order By<span class="caret"></span></a>
                <ul class="dropdown-menu sort-options" role="menu">
                    <li><a href="#" >Default</a></li>
                    <li><a value="title">Title</a></li>
                    <li class="divider"></li>
                    <li><a href="#" value="date-created-oldest">Oldest Parts</a></li>
                    <li><a href="#" value="date-created-newest">Newest Parts</a></li>
                    <li class="divider"></li>
                    <li><a href="#" value="stock-volume-largest">Smallest Volume</a></li>
                    <li><a href="#" value="stock-volume-smallest">Largest Volume</a></li>
                </ul>
            </li>
        </ul>
    </div>

jQuery 片段：

$('.sort-options li').click(function () {
    var sort = $(this).attr('value');
        opts = {};
        alert('Value: ' + $(this).attr('value'));

单击事件在列表项上正确触发，但我的值始终未定义或为 0。我也尝试使用数据注释，但结果相同。有人知道这笔交易是什么吗？

Answer 1

试试这个，

var sort = $(this).find('a').attr('value');

因为$(this)引用了li，但是li没有属性value。在我们的例子中，您需要在 li 标签 a 中搜索并获取属性 value

Answer 2

HTML:-

<!DOCTYPE html>
<html>
<head>
    <title>show the value of li</title>
    <link rel="stylesheet"  href="pathnameofcss">
</head>
<body>

    <div id="user"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <ul id="pageno">
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>
    <li value="4">4</li>
    <li value="5">5</li>
    <li value="6">6</li>
    <li value="7">7</li>
    <li value="8">8</li>
    <li value="9">9</li>
    <li value="10">10</li>

    </ul>

    <script src="pathnameofjs" type="text/javascript"></script>
</body>
</html>

JS:-

$("li").click(function ()
{       
var a = $(this).attr("value");

$("#user").html(a);//here the clicked value is showing in the div name user
console.log(a);//here the clicked value is showing in the console
});

CSS:-

ul{
display: flex;
list-style-type:none;
padding: 20px;
}

li{
padding: 20px;
}

单击时获取 <li> 值属性？

Get <li> value attribute on click?

jquery

twitter-bootstrap