jQuery addClass无法与switch语句一起使用，并且是伪指令

问题描述

| 在某些情况下，addClass在我看来似乎不起作用。看下面的代码：

$(\"#my-div-container .my-sub-div li a\").live(\'mouseover\',function(e){
    e.preventDefault();

    var li_parent_elem = $(this).parent();
    li_parent_elem.siblings().removeClass();

    switch(true)
    {
        case (li_parent_elem.is(\"#my-div-container .my-sub-div li:first-child\") == true):
            //alert(\"First\");
            li_parent_elem.addClass(\"first\");
        break;

        case (li_parent_elem.is(\"#my-div-container .my-sub-div li:last-child\") == true):
            //alert(\"Last\");
            li_parent_elem.addClass(\"last\");
        break;

        default:
            //alert(\"Mid\");                     
            li_parent_elem.addClass(\"mid\");
    }
});

addClass不适用于前两个case语句，仅适用于默认情况。但是，当我取消注释alert指令时，我得到了正确的警报，因此我知道条件语句正在工作。 我不确定这是哪里出了问题，希望能得到一些帮助。     

解决方法

我不认为您确实需要在那里进行切换（并且该切换看起来很破损！）。尝试以下方法：

if (li_parent_elem.is(\"#my-div-container .my-sub-div li:first-child\"))
    li_parent_elem.addClass(\"first\");
else if (li_parent_elem.is(\"#my-div-container .my-sub-div li:last-child\"))
    li_parent_elem.addClass(\"last\");
else 
    li_parent_elem.addClass(\"mid\");

    ,

//More efficient event handler
$(\'#my-div-container .my-sub-div\').delegate(\'li a\',\'mouseover\',function(e) {
    e.preventDefault();

    var items = $(this).parent().siblings(\'li\');

    //this could be chained to the line above
    items.removeClass();

    //no reason for a switch statement for something so simple
    //iterate over each element and check if its position
    items.each(function() {
        if($(this).is(\':first\')) {
            $(this).addClass(\'first\');
        }
        else if($(this).is(\':last\')) {
            $(this).addClass(\'last\');
        }
        else {
            $(this).addClass(\'mid\');
        }
    });
});

改进的：

$(\'#my-div-container .my-sub-div\').delegate(\'li a\',function(e) {
    e.preventDefault();

    var items = $(this).parent().siblings(\'li\');

    items.removeClass().addClass(function() {
        return $(this).is(\':first\') ? \'first\' : ($(this).is(\':last\') ? \'last\' : \'mid\');
    });
});

    ,经过一番摆弄之后，我似乎已经找到了解决方案，尽管我不太喜欢它，因为我不了解它为什么起作用，而先前的代码却不起作用。 这是修改后的代码：

$(\"#my-div-container .my-sub-div li a\").live(\'mouseover\',function(e){
e.preventDefault();

var li_parent_elem = $(this).parent();
li_parent_elem.siblings().removeClass();

switch(true)
{
    case (li_parent_elem.is(\"#my-div-container .my-sub-div li:first-child\") == true):
        //alert(\"First\");
        li_parent_elem.removeAttr(\"class\").addClass(\"first\");
    break;

    case (li_parent_elem.is(\"#my-div-container .my-sub-div li:last-child\") == true):
        //alert(\"Last\");
        li_parent_elem.removeAttr(\"class\").addClass(\"last\");
    break;

    default:
        //alert(\"Mid\");                     
        li_parent_elem.addClass(\"mid\");
}
});

我仍然茫然无措，为什么即使删除了switch语句并在以前的代码中使用了if-else，它也没有用，但是确实如此。 也许是错误或其他东西。