2016-09-14 3 views
1
(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++; 
     } 
    } 
})(); 

ich diesen Code, der dynamisch ist, um Bilder für eine Website zu erzeugen, jetzt, was ich will, ist, dass, wenn ich über eines dieser Elemente schweben, ich möchte ein div dynamisch generieren, ist die gleiche Größe und in der gleichen Position wie das dynamisch generierte Objekt, über dem ich schwebte. Außerdem werden alle Elemente absolut mit CSS positioniert. Vielen Dank.jquery dynamische Inhalte, die durch dynamische Inhalte

+2

'$' Methode 'jQuery' gibt immer einen' object' und 'object' ist nie ein' falsey' Wert .. – Rayon

+2

Wenn Sie überprüfen möchten, dass keine übereinstimmenden Elemente vorhanden sind, verwenden Sie '$ (". grid "). length === 0' oder einfach'! $ (". grid"). length'. –

+0

oh was soll ich sagen statt return false? (Obwohl der Code funktioniert, irgendwelche Tipps zu der Frage?) –

Antwort

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> 

Geben Klassen abc und def die notwendigen CSS-Regeln wie Position, Marge usw.

Verwandte Themen