Question

解决!! css img display：none与新添加的元素无关。非常感谢大家。

HTML：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link type="text/css" href="galerina.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="galerina">
            <img class="img1" src="images/1.jpg" alt=""/>
            <img class="img2" src="images/2.jpg" alt=""/>
            <img class="img3" src="images/3.jpg" alt=""/>
            <img class="img4" src="images/4.jpg" alt=""/>
            <p/>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="galerina.js"></script>
    </body>
</html>

CSS：

div.galerina{
    max-width: 500px;
    position: relative;
}

div.galerina img{
    margin: auto;
    display: none;
    opacity: 0;
}

div.galerina img.img1{
    display: block;
    opacity: 1;
}

JS：

    $("div.galerina").each(function(){
    var gal=$(this);
    var size=$(gal).children("img").size();
    var i=0;

    $(gal).children("img").each(function(){
    var img=$(this);
    $(gal).append("<img src='images/bullet.png'/>").click(function(){
        img.stop().animate({opacity:0},300);
        img.css({display:none});
    })
})
})

页面加载时没有项目符号？为什么??

Answer 1

我认为你需要做

var img=$(this);

获取JQuery包装器，以便父调用工作

Answer 2

嗯，你可以做很多事情来改善代码。正如我在评论中所说的那样，避免缓存您可以直接访问的值，并学会使用fadeOut()之类的方法，而不是自己完成所有工作。

根据这些指导方针进行一些重构（如果我正确理解了您要实现的目标），您的代码将变为：

$("div.galerina").each(function() {
    $(this).children("img").before("<img src='images/bullet.png'/>")
           .click(function() {
        $(this).prev().andSelf().fadeOut(300);
    });
});

Answer 3

这应该有效：

$("div.galerina").each(function(){
    var gal=$(this);
    var size=gal.children("img").size();
    var i=0;
    gal.children("img").each(function(){
        var img=$(this);
        img.parent().append(
        '<img src="images/bullet.png" alt="" />').click(
            function(){
                 $(this).stop().animate({opacity:0},300);
                 $(this).css({"display":"none"});
        });
    });
});

jquery不会将元素附加到页面

3 个答案: