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;}

Answer 2

事实证明，悬停功能与点击发生冲突。但实际上只能使用removeClass（）。addClass（）行（？） .css（）部分有效。

我怎样才能优雅地解决这个问题？

    $('.vpMedia').hover(function() {
    $(this).find(".vpLeft").css("opacity" , "0.2");
    $(this).find(".vpLeftText").css("color" , "#00cc00");
    },
    function() { //mouseout
    $(this).find(".vpLeft").css("opacity" , "0");
    $(this).find(".vpLeftText").css("color" , "#aaa");
});

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

    var selectedBT1 = $(this).find(".vpLeft");
    selectedBT1.removeClass();
    selectedBT1.addClass("vpLeft_Selected"); //if i remove the hover function above, this works.

    var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected");//if i remove the hover function above, this works.

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

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

2 个答案: