Question

当MySQL更改或添加新行时，如何在滑块jquery自动更新中获取div内容？

我已尝试使用我的代码，但我的滑块不起作用，无法滑动任何div内容。

我的代码：

的index.php

<html>
<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js">
    </script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="slick.css" />
    <link rel="stylesheet" type="text/css" href="slick-theme.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('.single-item').slick({
                dots: false,
                infinite: true,
                speed: 700,
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: true,
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({
                cache: false
            });
            setInterval(function () {
                $('.single-item').load('item.php');
            }, 3000);
        });
    </script>
    <style type="text/css">
        body {
            background-color: darkturquoise;
        }
    </style>
</head>

<div class="single-item" style="width: 500px; height: 500px; margin: auto;">

</div>

</html>

item.php

<?php
include 'connect.php';

$sql = mysql_query("SELECT * FROM fm_product WHERE p_pined = 'PINED'") or die(mysql_error());
while($result = mysql_fetch_array($sql)){
    echo '<div style="background-color: white; height: 200px;">'.$result['p_id'].'</div>';
}

?>

我的代码给出了输出：

Answer 1

我不确定这是否有资格作为一个完整的答案，但主要问题在于你使用.load以及它与光滑的滑块插件的交互（或缺少它）。

您网页上的活动顺序如下：

dom已加载＆amp;准备好了。
Slick Slider在.single-item初始化。 .single-item（当前没有）的内容被光滑的滑块HTML替换，以正确设置和渲染幻灯片，控制按钮等。
- 这很重要，因为.single-item现在充满了许多不同的HTML元素。如果你不确定它是什么样的，check the slick slider demo page - 查看页面源代码，然后使用开发人员工具查看源代码，看看它的外观变化。
- 此外，.single-item原本从未有过任何内容，因此会呈现零幻灯片。此时，您已创建一个空滑块。
您的setInterval活动已注册。
3秒钟过去了。
您的setInterval事件首次触发。对item.php进行了XHR，它使用HTML进行响应 - 一组包含数据的样式divs。
- 此时，您可以使用开发人员工具通过监控网络请求区域来确认item.php正在返回正确的数据。
您的脚本接受请求响应（HTML），完全替换single-item的内容。
- 警报响铃此时应响铃，因为这会立即导致此元素（光滑的HTML设置）中的内容与其替换内容之间发生冲突。如果您查看开发人员工具控制台，您甚至可能会发现一些错误，这些错误来自于抱怨缺少元素的光头。
GOTO STEP4

正在发生的事情是你的.load调用正在替换包含光滑滑块设置的元素的内容，完全打破了滑块。

您需要做的是改变处理AJAX的方式。您应该删除.load并转向使用$.ajax进行更好的回调控制。根据{{3}}，你可以：

在每个XHR请求返回时 - 使用$('.single-item').slick('unslick');销毁光滑的滑块，将内容插入.single-item，然后重新初始化滑块。
跟踪当前幻灯片。在每次XHR返回时，检测哪些幻灯片存在以及哪些幻灯片不存在，并使用.slick('slickAdd', HtmlOrDomNode）和.slick('slickRemove' slideIndex)

希望这有帮助。

自动更新滑块jquery中的div内容

1 个答案: