我正在使用Flip插件为MySQL表的每一行创建一个div,并通过AJAX带来结果,在div前面我显示名称,在div后面显示一些信息。这是我的代码:
index.html
<div class="result"></div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script>
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
});
$(".fff").flip({
trigger: 'manual'
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
</script>
result.php
<?php
$connect = mysqli_connect("localhost", "root", "mypass", "mydatabase");
$sql = "SELECT * FROM users";
$res = mysqli_query($connect,$sql);
$html='';
if(mysqli_num_rows($res)>0){
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)){
$id= $row['id'];
$html.='<div class="card_'.$id.' fff">
<div class="front">'.$row['name'].'
<button onclick="flip_back(\''.$id.'\');">MORE INFO</button>
</div>
<div class="back">'.$row['email'].'Back content
<button onclick="flip_front(\''.$id.'\');">RETURN</button>
</div></div>';
}
echo $html;
}
?>
问题是翻转插件和onclick javascript函数不起作用,我也试过使用这种方法:
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
});
$(document).on("load",function(){
$(".fff").flip({
trigger: 'manual'
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
});
或者这样:
$(document).on("load",function(){
$.post("test2.php",{
}).done(function(resp){
$(".result").html(resp);
});
});
$(".fff").flip({
trigger: 'manual'
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
我还检查了这个question,并尝试了以下内容:
$(".fff").flip({
trigger: 'manual',
onBefore: function(){
console.log('before starting the animation');
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
});
}
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
但它仍然不起作用。我该怎么解决它呢?
我需要你的帮助。
发布于 2018-08-04 06:31:13
最后,它将翻转函数放入AJAX响应中:
$.post("result.php",{
}).done(function(resp){
$(".result").html(resp);
$(".fff").flip({
trigger: 'manual'
});
});
function flip_back(idx){
$(".card_"+idx).flip(true);
}
function flip_front(idx){
$(".card_"+idx).flip(false);
}
如果你有其他选择,那就太好了。
https://stackoverflow.com/questions/51680274
复制相似问题