Question

我使用这个啧啧：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加载中加载这个效果，我希望它在有效的数据中显示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之前运行，所以它不起作用。请帮我。谢谢！

Answer 1

您没有初始化插入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 */ })
});

我对这个特定的插件一无所知。

它可能还允许您将图像添加到现有实例。如果是这样，将在文档中列出

Answer 2

DatabaseReference ref = FirebaseDatabase.getInstance().getReference();
DatabaseReference issue1 = ref.child("issue_1");

myAdapter = new FirebaseListAdapter<Song>(player.this, Song.class,
                                          R.layout.song_item, issue1) {

试试这个，这可能是因为所有函数绑定都在已经加载的元素上如果要动态加载元素，还需要将函数绑定到新加载的元素。

每个json加载中的Jquery.html无法正常工作

2 个答案: