Question

首先;如果我的问题无关紧要，我很抱歉，因为我是jQuery

的新手

我的网站上有一个菜单。这是HTML;

<ul class="page-sidebar-menu">
    <li data-link="index.php"><a href="index.php">Home</a></li>
    <li data-link="logout.php"><a href="logout.php">Logout</a></li>
</ul>

我正在使用网址路径与li data-link进行比较，以将active类添加到li

但不幸的是，它返回未定义。

这是我的javascript / jQuery;

var pathname = window.location.pathname; // Returns path only
var encPath  = encodeURIComponent(pathname);  // Encoded URL
var splPath  = encPath.split('%2F');
var cleanUrl = splPath.pop(); // Clean Url
var dataUrl  = $('ul.page-sidebar-menu > li').attr('data-link');
$(dataUrl).each(function( i ) {
    if(dataUrl === cleanUrl) {
        dataUrl.addClass('active');
    }
});

我的代码出了什么问题？我该如何解决？任何帮助都很有用。

PS：抱歉英语不好。

Answer 1

您需要迭代$('ul.page-sidebar-menu > li')并测试每个元素data-url属性。

$('ul.page-sidebar-menu > li').each(function( i ) {
    if($(this).attr('data-link') === cleanUrl) {
        $(this).addClass('active');
    }
});

您还可以使用Element.dataset属性访问在(data-*)等元素上设置的所有自定义数据属性this.dataset.link

代码可以改进为

$('ul.page-sidebar-menu > li').filter(function( i ) {
    return this.dataset.link === cleanUrl;            
}).addClass('active');

Answer 2

您可以each使用li获取每个li的data-link并与cleanUrl匹配

var pathname = window.location.pathname; // Returns path only
var encPath = encodeURIComponent(pathname);  // Encoded URL
var splPath = encPath.split('%2F');
var cleanUrl = splPath.pop(); // Clean Url
$('ul.page-sidebar-menu > li').each(function(){
if ($(this).attr("data-link") === cleanUrl) {
    dataUrl.addClass('active');
   }
});

Answer 3

使用$().data('link')检索data-link属性的值：

$('ul.page-sidebar-menu > li')
  .filter((index, item) => $(item).data('link') === cleanUrl)
  .addClass('active')

Answer 4

我的代码出了什么问题？我该如何解决？任何帮助都很有用。

问题：使用此行代码$('ul.page-sidebar-menu > li').attr('data-link');稍后您将尝试循环它。问题是即使这个语法$('ul.page-sidebar-menu > li')在您使用.attr后返回匹配元素的数组，它将只返回数组中第一个元素的值。因此，您最终只能进行一次迭代。

解决方案：正如其他答案所述，循环播放$('ul.page-sidebar-menu > li')，然后播放$(this).data('link')

$('ul.page-sidebar-menu > li').each(function( i ) {
    if($(this).data('link') === cleanUrl) {
        $(this).addClass('active');
        return false;   // break loop as we found the link.
    }
});

jQuery访问data-url元素并检查url参数

4 个答案: