Question

我尝试根据项目的文本内容向列表项添加一个类 - 它是一个解决方法，用于突出显示动态生成的菜单中的项目，但该类将应用于所有列出项目。是不是因为我比较了两种不同的变量？

    $(document).ready(function() {  
        $('article[id^=post]').filter(function(){
            var categorySelected = this.className.match(/\bcategory-\w+\b/).toString();
            var trimmed = categorySelected.replace(/^category-/,''); 
            if ( $(this).hasClass(trimmed) ) {
                alert ('article has category = true, location = ' + trimmed );
                    $('div#categories-3 li').each(function(index) {
                        var listItem = $(this).text().toLowerCase().replace(' ','-').toString();
                        if ( listItem = trimmed ) {
                            alert ('listItem = ' + listItem + ' trimmed = ' + trimmed); 
                            $(this).addClass('current-cat'); 
                        };
                    });
            };
        });
    });

..感谢您的建议，做出了改变，并进行了更多的诊断，但仍然无法取得突破。在这个版本中，“当前猫”＃39;类永远不会被添加：

    $(document).ready(function() {  
        $('article[id^=post]').filter(function(){
            var categorySelected = this.className.match(/\bcategory-\w+\b/).toString();
            var trimmed = categorySelected.replace(/^category-/,''); 
                if ( $(this).hasClass(trimmed) ) {
                    alert ('article has category = true\nlocation = ' + trimmed + '\ntrimmed var is type of ' + (typeof trimmed) );
                        $('.cat-item').each(function(index) {
                            $(this).addClass('item-' + index);
                            var listItem = $(this).text().toLowerCase().replace(' ','-');
                            alert ( 'listItem var is type of ' + typeof listItem ) ;
                            if ( listItem == trimmed ) {
                                 alert ('listItem = ' + listItem + ' trimmed = ' + trimmed); 
                                 $(this).addClass('current-cat'); 
                                 }

                        });
                    };
        });
    });

这是它的HTML：

    <div id="container">
        <article id="post-49" class="post-49 post type-post status-publish format-standard hentry category-reykjavik reykjavik photograph">
            some content 
        </article>
        <div id="categories-3" class="widget widget_categories">
            <h4 class="widgettitle">
                Location 
            </h4>
            <ul>
                <li class="cat-item cat-item-1">
                    <a href="#">
                        Havana 
                    </a>
                </li>
                <li class="cat-item cat-item-3">
                    <a href="#">
                        London 
                    </a>
                </li>
                <li class="cat-item cat-item-13">
                    <a href="#">
                        Reykjavík 
                    </a>
                </li>
            </ul>
        </div>
    </div>

Answer 1

将if ( listItem = trimmed )更改为if ( listItem == trimmed )

Answer 2

if ( listItem = trimmed ) {

应该是

if ( listItem == trimmed ) {

Answer 3

if ( listItem = trimmed )

这会将trimmed分配给listItem，然后检查是否将某些内容分配给listItem，该内容始终为true。

你需要做

if ( listItem == trimmed )

Answer 4

在您的代码中，由于空格和换行符，比较永远不会成立。

if (listItem == trimmed) {

通过在if

前面添加一个控制台行[比警报更好]来调试它

console.log(listItem + "\t" + trimmed);
if (listItem == trimmed) {

同样为了提升性能，您不应该一遍又一遍地调用$(this)。它每次都会创建一个新的jQuery对象，这会使代码运行得更长。将其缓存到变量中并反复使用该变量。

Answer 5

添加replace method以从列表项中的文本中删除空格和换行符，此代码现在可以按预期工作，但它突出显示了如果文本包含Unicode字符时会出现的问题：

    $(document).ready(function() {  
        $('article[id^=post]').filter(function(){
            var categorySelected = this.className.match(/\bcategory-\w+\b/).toString();
            var trimmed = categorySelected.replace(/^category-/,''); 
                if ( $(this).hasClass(trimmed) ) {
                        $('.cat-item').each(function(index) {
                            var myListItem = $(this);
                            var theListItem = myListItem.text().toLowerCase().replace(' ','-');
                            theListItem = theListItem.replace(/(\r\n|\n|\r)/gm,'');
                            if ( theListItem == trimmed ) {
                                 myListItem.addClass('current-cat'); 
                                 }
                        });
                };
        });
    });

比较jQuery .each循环中的字符串

5 个答案: