jQuery:选择器不一致，有人可以解释一下我在这里做错了什么吗

Question

为什么这有效:

    $("div.cat_rollout").mouseover(function(){
    $(this ).removeClass().addClass("cat_rollover");
    $(this).animate({ fontSize: "22px" }, 'fast' );
}).mouseout(function(){
    $(this).removeClass().addClass("cat_rollout");  
    $(this).animate({ fontSize: "10px" }, 'fast' );
}); 

但这并不:

    $('.vpMedia').click(function() {

    var selectedBT1 = $(this).find(".vpLeft");
    selectedBT1.removeClass();
    selectedBT1.addClass("vpLeft_Selected"); //doesn't work

    var selectedBT2 = $(this).find(".vpLeftText"); 
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected"); //doesn't work

    $(this).find(".vpArrow").css("visibility", "visible"); //works
});

唯一的区别是我通过 find 引用一个子元素。

如果我执行上述代码但更改:

        var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected");

仅更改 CSS:

        var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.css("color", "#f00");

它有效。所以这与我执行双重jquery(removeClass和addClass)有关

这是一些 html:

<div class="vpWrapper">
    <div class="vpMedia">
        <a href="1.mp4" bitly="BITLY_PROCESSED">
            <div class="vpArrow" style="visibility: visible; ">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText_Selected">Blah</div>
                <div class="vpLeft_Selected"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="1-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="2.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText" style="color: rgb(170, 170, 170); ">Blah</div>
                <div class="vpLeft" style="opacity: 0; "></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="2-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="3.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow" style="visibility: visible; ">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText_Selected" style="color: rgb(0, 204, 0); ">Blah</div>
                <div class="vpLeft_Selected" style="opacity: 0.2; "></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="3-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="4.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="4-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="5.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="5-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="6.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="6-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="7.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="7-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
</div>

编辑:根据要求，CSS

.vpWrapper {
    width:286px;
    overflow-x: visible;
}

.vpMedia {
    margin: 0;
    padding: 0;
    background-color: fuchsia;
}

.vpArrow {
    height: 69px;
    width:12px;
    padding-top: 8px;
    float: left;
    visibility: hidden;
}

.vpLeftWrapper {
    position: relative;
    float: left;
    background-color: white;
    width:137px;
    height: 77px;
}
.vpLeft {
    position: absolute;
    top:0;
    left: 0;
    z-index: 788;
    float: left;
    background-color: #00cc00;
    width:121px;
    height: 61px;
    padding: 8px;   
    -moz-opacity:0;
    -ms-filter:'alpha(opacity=0)';
    filter:alpha(opacity=0);
    opacity:0;
}

.vpLeft_Selected {
    position: absolute;
    top:0;
    left: 0;
    z-index: 788;
    float: left;
    background-color: #00cc00;
    width:121px;
    height: 61px;
    padding: 8px;   
}

.vpLeftText {
    position: absolute;
    top:0;
    left: 0;
    z-index: 789;
    width:121px;
    height: 61px;
    padding: 8px;   
}

    .vpLeftText_Selected {
        position: absolute;
        top:0;
        left: 0;
        z-index: 789;
        width:121px;
        height: 61px;
        padding: 8px;
        color: white;
    }

Answer 1

我使用 Chrome 的开发人员工具来测试您的代码，并且该类已正确添加。这让我觉得你的 css 类定义有问题。那些看起来像什么？当我用这个 css 测试它时，它完全正常工作:

.vpLeftText_Selected {color:#0f0;}