Question

我刚刚开始学习jQuery，我遇到了这段代码的奇怪行为：

$(document).ready(function() {
    $("img").hover(function() {
        $(this).toggle( "explode" );
    });
});

HTML

<div id="head" >
    <div id="flag2" class="flag" ><img src="img/flag2.png"/></div>
    <div id="nickwrapper">
        <p id="nick">Text</p>
        <p id="undernick">Some text</p>
    </div>
    <div id="flag" class="flag" ><img src="img/flag.png"/></div>
</div>

而不是爆炸图像只是通过变小而消失.... 但是当我在为我的图像分配的类$（“。flag”）上更改$（“img”）时，图片更改行为..它向右移动并出现在另一个级别上..不像它是$（“ IMG“）。为什么会这样？我只想要特定类的图像爆炸..

Answer 1

班级＆＃34; .flag＆＃34;分配给包装DIV而不是img本身。所以基本上用img你就是爆炸图像。而使用.flag，你正在爆炸它周围的DIV。您可以将类标志放入img标记本身。

Answer 2

我不是100％我理解你的问题，但听起来你对css的问题比你的JQuery选择器更多。

我会尝试这样的事情：

    $(document).ready(function() {
        $("img").hover(function() {
            console.log("Hovered over image");
        });

        setTimeout(function(){
            $(someImageID).toggle("explode");
        }, 1000);
    });

只要将鼠标悬停在图像上，此代码就会打印到控制台日志中，然后在等待1000毫秒后单独显示单个图像。

这将有助于你a）确认你正确选择了你的选择器，并且b）确保爆炸按照你想要的方式工作。在你知道这两件事都有效之后，你可以将它们结合起来。

编辑：我刚看到您更新了帖子以包含您的HTML。关于你在课堂上遇到的问题，另一个答案是正确的。

Answer 3

您正在使用切换，您应该使用toggleClass

http://api.jquery.com/toggleclass/

jQuery函数意外行为

3 个答案: