当前位置： 文江博客话题详情

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

发布于 2024-09-12 04:49:25 字数 7335 浏览 2 评论 0原文

为什么这有效：

    $("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;
    }
原文

Why does this work:

    $("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' );
});

But this does not:

    $('.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
});

The only difference is that I'm referencing a child through find.

If i do the above code but change:

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

To just changing CSS:

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

It works. So it has something to do with me doing a double jquery (removeClass and addClass)

Here is some 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>

Edit: As requested, the 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;
    }

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

自此以后，行同陌路 2024-09-19 04:49:25

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

.vpLeftText_Selected {color:#0f0;}

I used Chrome's Developer Tools to test your code, and the class is getting added correctly. That makes me think there is a problem with your css class definitions. What do those look like? It worked fully when I tested it with this css:

.vpLeftText_Selected {color:#0f0;}
回复 原文
谎言 2024-09-19 04:49:25

事实证明，悬停功能与点击发生冲突。
但实际上只能使用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?!
});

It turns out that the hover function is clashing with the click.
But actually only with the removeClass().addClass() lines(?)
The .css() part works.

How can I get around this elegantly?

    $('.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?!
});
回复 原文
~没有更多了~

关于作者

夜唯美灬不弃

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文