Fatal编程技术网
  • javascript/
  • Javascript 自动更新滑块jquery内的div内容

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

javascript php jquery ajax

Javascript 自动更新滑块jquery内的div内容,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,当MySQL已更改或添加了新行时，如何在slider jquery自动更新中获取div内容 我试过使用我的代码，但我的滑块不工作，无法滑动任何div内容 我的代码： index.php <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"> </script> <script type="tex

当MySQL已更改或添加了新行时，如何在slider 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>

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

?>


$（文档）.ready（函数（）{
美元（“.单项”）。光滑({
点：错，
无限：是的，
速度:700,，
幻灯片放映：1，
幻灯片滚动：1，
箭头：是的，
});
});
$（文档）.ready（函数（）{
$.ajaxSetup({
缓存：false
});
setInterval（函数（）{
$（'.single item'）.load（'item.php'）；
}, 3000);
});
身体{
背景色：暗绿色；
}
item.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>

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

?>

我不确定这是否是一个完整的答案，但一个主要问题在于您对
.load
的使用以及它与slick slider插件的交互（或缺乏交互）

页面上事件的顺序如下所示：


  • dom已加载并准备就绪
    • 

  • 滑动条在
    上进行了初始化。单个项目
    。
    .single item
    （目前没有）的内容将替换为slick slider的HTML，以正确设置和呈现幻灯片、控制按钮等。

      

    • 这一点很重要，因为
      .single item
      现在充满了许多不同的HTML元素。如果您不确定它是什么样子的，-请查看页面源代码，然后使用开发人员工具查看源代码，以查看其外观的变化
      • 

    • 此外，
      .single item
      最初从未包含任何内容，因此它将呈现零张幻灯片。此时，您已经创建了一个空滑块
      • 

    • 

  • 您的
    setInterval
    事件已注册
    • 

  • 3秒钟过去了
    • 

  • 您的
    setInterval
    事件第一次触发。对
    item.php
    进行了修改，它以HTML响应—一组包含数据的样式化
    div
    。

      

    • 此时，您可以使用开发人员工具通过监视网络请求区域来确认
      item.php
      正在返回正确的数据
      • 

    • 

  • 您的脚本接受请求-响应（HTML）并完全替换
    单个项目的内容。
    

      

    • 此时，警钟应该敲响了，因为这会立即导致该元素中的内容（slick的HTML设置）与它所替换的内容之间发生冲突。如果您查看开发人员工具控制台，您甚至可能会发现一些错误从slick弹出，抱怨缺少元素
      • 

    • 

  • 转到步骤4
    • 
发生的情况是，您的
    .load
    调用正在替换包含光滑滑块设置的元素的内容，完全破坏了滑块
    
您需要做的是改变处理AJAX的方式。您应该放弃
    .load
    ，转而使用
    $.ajax
    以获得更好的回调控制。根据以下内容，您可以：
    

      

    • 在每次XHR请求返回时-使用
      $（'.single item'）销毁滑动条。滑动条（'unslick'）
      ，将内容插入
      。单个项目
      ，然后重新初始化滑块
      • 

    • 跟踪当前幻灯片。在每次XHR返回时，检测哪些幻灯片存在，哪些不存在，并使用
      .slick（'slickAdd'，HtmlOrDomNode
      ）和
      .slick（'slickRemove'slideIndex）
      • 

    

    希望这能有所帮助。
    我不确定这是否是一个完整的答案，但一个主要问题在于您对
    .load
    的使用以及它与slick slider插件的交互（或缺乏交互）
    
页面上事件的顺序如下所示：
    

  • dom已加载并准备就绪
    • 

  • 滑动条在
    上进行了初始化。单个项目
    。
    .single item
    （目前没有）的内容将替换为slick slider的HTML，以正确设置和呈现幻灯片、控制按钮等。

      

    • 这一点很重要，因为
      .single item
      现在充满了许多不同的HTML元素。如果您不确定它是什么样子的，-请查看页面源代码，然后使用开发人员工具查看源代码，以查看其外观的变化
      • 

    • 此外，
      .single item
      最初从未包含任何内容，因此它将呈现零张幻灯片。此时，您已经创建了一个空滑块
      • 

    • 

  • 您的
    setInterval
    事件已注册
    • 

  • 3秒钟过去了
    • 

  • 您的
    setInterval
    事件第一次触发。对
    item.php
    进行了修改，它以HTML响应—一组包含数据的样式化
    div
    。

      

    • 此时，您可以使用开发人员工具通过监视网络请求区域来确认
      item.php
      正在返回正确的数据
      • 

    • 

  • 您的脚本接受请求-响应（HTML）并完全替换
    单个项目的内容。
    

      

    • 此时，警钟应该敲响了，因为这会立即导致该元素中的内容（slick的HTML设置）与它所替换的内容之间发生冲突。如果您查看开发人员工具控制台，您甚至可能会发现一些错误从slick弹出，抱怨缺少元素
      • 

    • 

  • 转到步骤4
    • 
发生的情况是，您的
    .load
    调用正在替换包含光滑滑块设置的元素的内容，完全破坏了滑块
    
您需要做的是改变处理AJAX的方式。您应该放弃
    .load
    ，转而使用
    $.ajax
    以获得更好的回调控制。基于