javascript - 为什么我的 hasClass 的 if/else 条件只触发第一个条件?

标签 javascript jquery

我的 if/else 的 else 条件没有触发。条件是针对 li.catparent 的,因此如果单击它,我可以触发某些代码。如果单击没有“li.catparent”的其他项目之一,则会触发不同的代码。也许有人可以告诉我我错过了什么?我的 if/else 语句非常简单,我不确定为什么它没有触发。我肯定错过了一些东西。

HTML:

    <ul class="portal-filter categorylist" id="filter">
        <li class="all"><a class="selected" href="#" data-filter="*">All</a></li>
        <li class="category"><a href="#" data-filter=".category1">Category 1</a></li>
        <li class="category"><a href="#" data-filter=".category2">Category 2</a></li>
        <li class="catparent">
            <span class="catparenttxt">
                Category Parent

                <span class="subnavarrow"></span>
            </span>

            <ul class="subcatlist">
                <li class="category"><a href="#" data-filter=".subcategory1">Subcategory 1</a></li>
                <li class="category"><a href="#" data-filter=".subcategory1">Subcategory 2</a></li>
                <li class="category"><a href="#" data-filter=".subcategory1">Subcategory 3</a></li>
            </ul>
        </li>
        <li class="category"><a href="#" data-filter=".category1, .category2">Category 1 and 2</a></li>
    </ul>

jQuery

    $('ul.categorylist > li').on('click', function(){

        if($(this).hasClass('catparent')){
            console.log('category parent clicked');
        }

        else{
            console.log('category without parent clicked');
        }

    });

    $('ul.categorylist > li').on('click', function(){

        if($(this).hasClass('catparent')){
            console.log('category parent clicked');
        }

        else if(!$(this).hasClass('catparent')){
            console.log('category without parent clicked');
        }

    });

这是一个Fiddle这似乎适用于简单的代码。

这是一个fiddle包含我的整个项目代码表明它不起作用。

最佳答案

此问题似乎与您使用的媒体盒插件有关。如果您从您提供的损坏的 JSFiddle 中取出 $('#grid').mediaBoxes({ ... }); 部分,它会按预期完美工作。您可以在更新的 JSFiddle here 中看到此修复.

要解决此问题,您还需要处理列表项内 a 标记的点击:

$('ul.categorylist > li, ul.categorylist > li a').on('click', function() {
    ....
});

关于javascript - 为什么我的 hasClass 的 if/else 条件只触发第一个条件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26239049/

相关文章:

javascript - 获取一个字符串并用新的 div 替换它

javascript - 从函数获取单击链接的文本

javascript - Onclick 类更改不起作用

jquery ThemeSwitcher 在 HTTPS 方面存在问题

jquery - Django/Ajax - 如何根据选择过滤和显示结果

javascript - 在 Mongo 中重新加入拆分 MapReduce 数组

jquery - IE 8 CSS li 显示不正确

javascript - 如何在 Google Maps API 上绘制圆圈并在圆圈内搜索?

代码上的 Javascript Mustache 无效模板

javascript - 在日期选择器中验证日期