为什么带有hasClass的if / else条件只会触发第一个条件?

时间:2014-10-07 14:59:41

标签: 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,其中包含我的整个项目代码,表明它不起作用。

2 个答案:

答案 0 :(得分:2)

原因是click-event实际上只是为li.catparent触发;这是因为其他lis中的锚元素消耗了鼠标点击。

您也可以为这些人添加处理程序以接收事件:

$('ul.categorylist li a').on('click', function(e) {
 alert('a inside li clicked');
}

答案 1 :(得分:2)

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

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

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