Question

我正在使用HTML，PHP和Ajax在我的网站中切换开关。但是，只有最上面的开关才起作用。我使用PHP的原因是为了显示数据库的结果，而Ajax可以在不重新加载网站的情况下切换开关。在此先感谢您提出任何疑问！

Photo Here :D I have three rows in the DB. Data retrieve fine. Top button works!

ps：为简单起见，删除了所有类

关于main.php和recipe.inc.php。之所以将它们分开是因为在许多文档中都使用了recipe.inc.php。

main.php

<?php
   $conn = mysqli_connect(localhost,****,****,loginsystem);
   //DB connection
   $query="SELECT * FROM `recipe` WHERE creator='$uid'";
   //SQL Query
   $results = mysqli_query($conn,$query);
   $array = array();
   //Array to save key column of the result in order
     while ($row = mysqli_fetch_assoc($results)) {
       for ($i = 0; $i < count($row[recipe_ID]); $i++) {
         $array[$i] = $row[recipe_ID];
         echo '<input type="hidden" id="recipe_ID" name="recipe_ID" value="';
         echo $array[$i];
         echo '">';
    //might confuse you. this is just to hand over recipe_ID to recipe.inc.php
         echo  '<li>';
         echo  '<label>';
           if($row[status]==1){
            echo  '<input type="checkbox" id="checkStatus" name="checkStatus" checked="">';
    //In case where row[status] is equal to 1. means it's ON
                    }else{
            echo  '<input type="checkbox" id="checkStatus" name="checkStatus">';
    //OFF otherwise
                    }
         echo  '<span class="switcher-indicator"></span>';
         echo  '</label>';
         echo  '</li>';
         }
     } 
   ?>

recipe.inc.php

    <?php            
    if(isset($_POST['checkStatus'])){
    $recipe_ID = $_POST['recipe_ID']);

    if($_POST['checkStatus']=='ON'){
    $status = 1; //to save in DB as boolean. if ON->1
    }else if($_POST['checkStatus']=='OFF'){
    $status = 0; //if OFF->0
    }

  $sql = "UPDATE `recipe` SET `status`=$status WHERE creator=$uid AND recipe_ID=$recipe_ID";
    //nev
  mysqli_query($conn,$sql);
    }
    ?>

并且Ajax部分保存在另一个js文件中。 recipe.js

    $(document).ready(function() {
     $('#checkStatus').on('click', function() {
        var checkStatus = this.checked ? 'ON' : 'OFF';
        var recipe_ID = $("#recipe_ID").val();
        $.post("loginsystem/includes/recipe.inc.php", {
          "checkStatus": checkStatus,
          "recipe_ID": recipe_ID
        },
        function(data) {
            $('#checkStatus').html(data);
        });
     });
});

Answer 1

听起来所有开关都具有相同的ID。如果是这样，那么只有第一个可以工作。

尝试更改您的代码，使其看起来像这样：

<?php
   $conn = mysqli_connect(localhost,****,****,loginsystem);
   //DB connection
   $query="SELECT * FROM `recipe` WHERE creator='$uid'";
   //SQL Query
   $results = mysqli_query($conn,$query);
   $cnt = 1;
   $array = array();
   //Array to save key column of the result in order
     while ($row = mysqli_fetch_assoc($results)) {
       for ($i = 0; $i < count($row[recipe_ID]); $i++) {
         $array[$i] = $row[recipe_ID];
         echo '<input type="hidden" id="recipe_ID-' .$cnt. '" name="recipe_ID" value="';   <============== HERE
         echo $array[$i];
         echo '">';
    //might confuse you. this is just to hand over recipe_ID to recipe.inc.php
         echo  '<li>';
         echo  '<label>';
           if($row[status]==1){
            echo  '<input type="checkbox" id="checkStatus-' .$cnt. '" name="checkStatus" checked="">'; //<============== HERE
    //In case where row[status] is equal to 1. means it's ON
                    }else{
            echo  '<input type="checkbox" id="checkStatus-' .$cnt. '" name="checkStatus">'; //<================ HERE
    //OFF otherwise
                    }
         echo  '<span class="switcher-indicator"></span>';
         echo  '</label>';
         echo  '</li>';
         }
     $cnt++; <=========== HERE
     } 
?>

我的网站中只有最顶级的开关有效

1 个答案: