Question

我正在尝试做一些我认为应该相当简单的事情。我正在使用Bootstrap作为Navbar，并使用jQuery查找（下拉菜单）列表中的项目。事件正确触发，但“值”始终以未定义的形式返回。

Navbar代码：

    <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'));

click事件在列表项上正常触发，但我的值始终未定义或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>值属性？</li>

2 个答案: