[英]Jquery.html in each json load not working
我使用此tut: https ://www.ostraining.com/images/coding/jquery-flip/demo/完美地工作。 这段代码运行良好,它显示了2个具有影响的图像
<div id="flip">
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
<div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
</div>
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
<div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;">
<img src="img/source/5.jpg" alt="" style="backface-visibility: hidden;">
</div>
</div>
</div>
因为我正在通过json加载数据,所以,我想在循环json加载中加载此效果,我希望它在具有effect的数据中显示10个图像,我的代码为:
<div id="flip">
</div>
<script>
$(document).ready(function(){
var url="http://localhost/service/load_data.php";
//load 10 image
$.getJSON(url,function(result){
$.each(result, function(i, field){
var id=field.id;
var img=field.img;
$('#flip').append('<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;"><div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div> <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div></div> ');
});
});
});
</script>
它不显示图像,但不起作用。 我认为效果在加载json之前运行,所以它不起作用。 请帮我。 谢谢!
您不需要初始化插入html后需要做的插件
就像是
$.getJSON(url, function(result) {
var $flip = $('#flip')
$.each(result, function(i, field) {
var id = field.id;
var img = field.img;
$flip.append('<div id="flip....../div> ');
});
$flip.flip({ /* plugin options here */ })
});
我对这个特定的插件一无所知。
也有可能允许您将图像添加到现有实例。 如果是这样,将在文档中概述
<div id="flip-this" class="flip-horizontal" style="perspective: 600px; position: relative; transform-style: preserve-3d;">
</div>
<script>
$(document).ready(function(){
var url="http://localhost/service/load_data.php";
//load 10 image
$.getJSON(url,function(result){
$.each(result, function(i, field){
var id=field.id;
var img=field.img;
$('#flip-this').append('<div class="front" style="height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.5s ease-out; transform: rotateY(0deg);"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div> <div class="back" style="transform: rotateY(-180deg); height: 100%; width: 100%; backface-visibility: hidden; transform-style: preserve-3d; position: absolute; z-index: 0; transition: all 0.5s ease-out;"> <img src="img/source/'+img+'" alt="" style="backface-visibility: hidden;"> </div>');
$("#flip-this").flip({
trigger: 'hover'
});
});
});
});
</script>
尝试执行此操作,这可能是因为所有功能绑定都在已加载的元素上,如果要动态加载元素,则还需要将功能绑定到新的加载元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.