由动态内容生成的jquery动态内容

时间:2016-09-14 05:23:15

标签: javascript jquery css html5

(function(){ 
    if (typeof $(".grid") === "undefined") {
        return false;
    } else {
        var count = 0;
        var images_to_place_container = ".grid";
        for (var image in images_to_place) {
            $(images_to_place_container).prepend("<div class = grid-item><div class=grid-item-hover></div><a href=work.php><img src=" + images_to_place[count] + "></a></div>");
            count++;
        }
     }
})();

我有这个动态生成网站图像的代码,现在我想要的是,当我将鼠标悬停在其中一个元素上时,我想动态生成一个与大小相同并且位置与动态生成的对象我徘徊过来。此外,所有元素都使用CSS绝对定位。感谢。

1 个答案:

答案 0 :(得分:0)

<body>
<div class='container'>
</div>
</body>
<script>
$(document).ready(function(){
    //this dynamically "creates" the images...
    $(".container").append("<img src='something.png' class='abc'>");

    //this watches for click triggers on dynamically created elements
    $(".container").on("click", "img.abc", function(){
        var pos_top = $(this).css("top");
        var pos_left = $(this).css("left");
        var obj = "<div class='def'></div>";
        $(obj).css("top", pos_top);
        $(obJ).css("left", pos_left);
        $(".container").append(obj);
    });
});
</script>

为课程abcdef提供必要的CSS规则,例如职位,保证金等。