php - 开/关按钮滑动 proto.io 不适用于 Ajax PHP 和 MySQL

Question

我用 http://proto.io/freebies/onoff/ 创建开/关按钮.单击按钮时，此按钮有幻灯片动画。我有一些代码并与开/关按钮 proto.io 结合使用。但是，当我结合 PHP、MySQL 和 Ajax 时，按钮滑动不起作用。？我该如何解决？

这是我的代码: 索引.php

<?php
$query=mysql_connect("localhost","learn","learnpass");
mysql_select_db("study",$query);
include("connection1.php");
$result = mysql_query("SELECT * FROM mytable ORDER BY id");
?>

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<div>
<table id="datatables" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Text</th>
    </tr>
    </thead>
    <tbody>
    <?php while ($row = mysql_fetch_array($result)) { ?>
        <tr>
            <td><?php echo $row["id"]; ?></td>
            <td><?php echo $row["name"]; ?></td>
            <td><?php echo $row["text"]; ?></td>
            <td>
                <div class="onoffswitch">
                    <input type="hidden" value="<?php echo $row["id"]; ?>" />
                    <input type="checkbox" class="onoffswitch-checkbox"
                        <?php
                        if($row['text']=="off")
                        {
                            echo "checked";
                        }
                        ?>>
                    <label class="onoffswitch-label" for="myonoffswitch<?php echo $row["id"]; ?>">
                        <div class="onoffswitch-inner"></div>
                        <div class="onoffswitch-switch"></div>
                    </label>
                </div>
                <div id="display">
                </div>
            </td>
        </tr>
    <?php
    }
    ?>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function(){
        $('.onoffswitch').click(function(){
            var hiddenValueID = $(this).children(':hidden').val();
            if ($(this).children(':checked').length == 0)
            {
                var valueData = 'on';
            }
            else
            {
                var valueData = 'off';
            }

            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: {value: valueData, id: hiddenValueID} ,
                done: function(html){
                    $("#display").html(html).show();
                }
            });

        });
    });
</script>
</div>

还有这个ajax.php

<?php
$query=mysql_connect("localhost","learn","learnpass");
mysql_select_db("testdb",$query);
if(isset($_POST['value']))
{
$value=$_POST['value'];
$id=$_POST['id'];
mysql_query("update mytable set text='$value' where id=$id");
echo "You have Chosen the button status as:" .$value;
}
?>

Answer 1

尝试为您的输入提供一个与标签的 for

匹配的 id

以http://proto.io/freebies/onoff/为例

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
                                  id="onoffswitch1" checked="">
<label class="onoffswitch-label" for="onoffswitch1">

在您的代码中替换这些行:

<input type="checkbox" class="onoffswitch-checkbox"
<?php if($row['text']=="off"){echo "checked"; }?> 
id="myonoffswitch<?php echo $row["id"]; ?>" >

<label class="onoffswitch-label" for="myonoffswitch<?php echo $row["id"]; ?>">

这应该可以解决问题。