Question

我正在使用Flip插件为MySQL表的每一行创建一个div，并通过AJAX带来结果，在div的前面，我显示了名称并在div的后面显示了一些信息。这是我的代码：

index.html

Your code:
function showScore() {
    console.log(quiz);
    var resultsHTML = "<h1>Results</h1>";
    resultsHTML += "<h2 id='score'>Your Score: " + quiz.getScore() + "</h2>";
    var quiz = document.getElementById("quiz");

    What internally happens:
        function showScore() {
            var quiz = undefined; // hoisting is happening here. So quiz is not reffering to public quiz variable anymore.
            console.log(quiz);
            var resultsHTML = "<h1>Results</h1>";
            resultsHTML += "<h2 id='score'>Your Score: " + quiz.getScore() + "</h2>";
            var quiz = document.getElementById("quiz");

result.php

<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>

问题是 Flip 插件和 onclick javascript函数无法正常工作，我也尝试使用此方法：

<?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;
  }

?>

或者这个：

$.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);
       } 
    });

我也检查了此question，并尝试了此操作：

$(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);
  }

但是它仍然无法正常工作。我该怎么解决？

我需要您的帮助。

Answer 1

最后，它可以在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);
}

如果您还有其他选择，那就太好了。

AJAX响应后，Flip插件和javascript函数不起作用

1 个答案: