Question

我想遍历一个数组，以便使用jQuery将CSS添加到菜单链接。如果URL中出现某个字符串，则会将某个CSS分配给包含相同字符串的菜单链接。

这是HTML（不确定它是否真的有帮助，但现在是这样）：

<ul>
    <li>
        <a href="http://mysite.com/">HOME</a>
        <a href="http://mysite.com/about">ABOUT</a>
        <a href="http://mysite.com/brands">BRANDS</a>
        <a href="http://mysite.com/investors">INVESTORS</a>
        <a href="http://mysite.com/news">NEWS</a>
        <a href="http://mysite.com/videos">VIDEOS</a>
        <a href="http://mysite.com/contact">CONTACT</a>
    </li>
</ul>

这是我的代码段：

var url_link = new Array();

url_link[0] = 'about';
url_link[1] = 'the-company';
url_link[2] = 'employment';
url_link[3] = 'customer-service';
url_link[4] = 'faqs';
url_link[5] = 'brands';
url_link[6] = 'news';
url_link[7] = 'videos';
url_link[8] = 'contact';

for (var i=0; i<url_link.length; i++) {
    if (location.href.indexOf(url_link[i])>=0) {
        $('.appearance-menus-'+url_link[i]+'>a').css("color", "#636363");
        $('.appearance-menus-'+url_link[i]+'>a').mouseout(function() {
            $(this).css("color", "#636363");
        });
    }
}

出于某种原因，这个片段破坏了网站，我怀疑这是将数组元素连接到jQuery选择器的问题。我一定搞砸了语法。

这样做的正确方法是什么？

Answer 1

由于indexOf不是跨浏览器功能，您应该使用替代方法（例如，使用http://www.w3schools.com/jsref/jsref_search.asp）或自行实现，如下所示：How to fix Array indexOf() in JavaScript for Internet Explorer browsers

Answer 2

您编写的代码没有什么特别的错误，它应该可以将内联样式添加到选定的链接。

您正在生成的选择器如下：

'.appearance-menus-about > a'
'.appearance-menus-the-company > a'
'.appearance-menus-employment > a'
'.appearance-menus-customer-service > a'
'.appearance-menus-faqs > a'
'.appearance-menus-brands > a'
'.appearance-menus-news > a'
'.appearance-menus-videos > a'
'.appearance-menus-contact > a'

您可能希望确保文档中存在这些内容。

最后，我略微自由地写了一个更高效的版本：

var url_links = [
        'about',
        'the-company',
        'employment',
        'customer-service',
        'faqs',
        'brands',
        'news',
        'videos',
        'contact'
    ],
    links = url_links.filter(function (val, index, arr) {
        return location.href.toLowerCase().indexOf(val.toLowerCase()) > -1;
    }),
    link = '';
for (i = 0; i < links.length; i += 1) {
    link = links[i];
    selector = '.appearance-menus-' + link + ' > a';
    console.log(selector);
    $(selector).mouseout(function() {
        $(this).css('color', '#636363');
    }).trigger('mouseout');
}

将数组元素连接到jQuery选择器中

2 个答案: