Question

我很生气，因为我意识到解决方案在我的论坛中是正确的。寻找一种方法来点击div.A，为每个div.A点击创建一个具有随机背景的div.B.我希望通过在此div.A上再次单击来删除创建的div.B.如果可能的话，我希望在同一个项目上多次点击，创建的div的背景是不同的，但如果它保持原样，那就不会打扰我。我就在这里：http://jsfiddle.net/ZU2ef/

html :

<div id="area">
</div><!--area-->

<div id="wrap">

    <div id="bouee">

        <div class="content">

            <div class="titre" id="sujet1">
            </div><!--titre-->
            <div class="post">
                <div class="carre"></div>
            </div><!--post-->

        </div><!--content1-->

        <div class="content">

            <div class="titre" id="sujet2">
            </div><!--titre-->
            <div class="post">
                <div class="carre"></div>
            </div><!--post-->

        </div><!--content2-->

        <div class="content">

            <div class="titre" id="sujet3">
            </div><!--titre-->
            <div class="post">
                <div class="carre"></div>
            </div><!--post-->

        </div><!--content3-->

</div><!--bouee-->

</div><!--wrap-->`

css : 

body {
    background-color: #508090;
    text-align:center;
    margin: auto;}
#area{
    border:green;
    width:100%;
    height:100%;
    position:absolute;
    top: 0px;
    left: 0px;
    z-index:1;
}
#wrap{
    background-color: blue;
    margin: 0 auto;
    width:inherit;
    height:auto;
    position:absolute;
    top: 15px;
    left: 15px;
    opacity:0.5;
    z-index:1000;
}
#bouee{
    width: 900px;
    height: auto;
    position:relative;
}
.content {
    background-color: transparent;
    position:relative;
    border:#F00 solid;
    overflow: hidden;
    height: 100px;
    margin-top: 15px;
    width: 100%;
}
.titre {
    background-color: #FFFF00;
    float: left;
    height: 20px;
    cursor:pointer;
    width: 10%;
}
.post {
    background-color: #FFFFFF;
    float: left;
    max-height: 0;
    overflow: hidden;
    margin: 1px;
    position: relative;
    width: 100%;
}
.carre {
    background-color: green;
    height: 200px;
    width: 20px;
}
.vague {
    opacity: 0.2;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:-10;
    top : 0;
    left : 0;
}

jquery (1.8.3) :

jQuery的（文件）。就绪（函数（$）{

    $(".content").each(function () {
        var
                $content = $(this),
                $title = $content.find(".titre"),
                $post = $content.find(".post");
                var counter = 1;
        var randomColors = ["green","yellow","red","blue","orange","pink","cyan"];
        var len = randomColors.length;
        var randomNum = Math.floor(Math.random()*len);
            //Removes color from array so it can't be used again
            randomColors.splice(randomNum, 1);


            $title.toggle(function() {
                var id = this.id;
                $post.animate({maxHeight:'150px'}, 400);
                $('<div/>').addClass('vague'+id+counter++).css({
                    //'background-color': 'white',
                    'background-color': randomColors[randomNum],
                    'opacity': '1',
                    'position': 'absolute',
                    'width': '100%',
                    'height': '100%',
                    'z-index':'1000',
                    'top' : '0',
                    'left' : '0'
                    }).appendTo('#area');
                }, 
                function () {
                    $post.animate({maxHeight:'0'}, 200);
                }
            );

            $title.click( function () {
                $(this).delay(200).toggleClass('active');
            });
            $('.titre.active').click( function () {
                var $back = $('body').find("#area").find(':first-child');
                $back.animate({opacity:'0'}, 200);
                $back.remove();
            });


        });
    });

我坚持要删除创建的div。放纵，我只是一个试图玩魔法的平面设计师。这不是订单，我开始和所有评论，或链接到包含信息或信息的文件是受欢迎的！非常感谢你！

Answer 1

DOM中不存在动态内容。所以东西在'Document.ready（function（）{...}）;'不会抓住它。

而是尝试使用委托函数来查找生成的内容。这是一个一般的例子。

$('.parent-that-generated-content-is-in').on('click', '#id-content',function(){
    $(this).hide(); 
});

jQuery：动态创建div并删除它

1 个答案: