个人中心
gpt4 book ai didi

javascript - 自动更新 slider jquery内的div内容

转载 作者：行者123 更新时间：2023-11-28 06:18:30 26 4
gpt4 key购买 nike

当 MySQL 发生更改或添加新行时，如何在 slider jquery 自动更新中获取我的 div 内容？

我已经尝试使用我的代码，但我的 slider 不起作用并且无法滑动任何 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>';
}

?>

我的代码给出的输出:

output

最佳答案

我不确定这是否符合完整的答案，但主要问题在于您对 .load 的使用以及它与光滑 slider 插件的交互(或缺乏交互)。

页面上的事件顺序如下:

  1. dom 已加载并准备就绪。
  2. Slick Slider 在 .single-item 上初始化。 .single-item 的内容(当前没有)被替换为光滑 slider 的 HTML，以正确设置和呈现幻灯片、控制按钮等。
    • 这很重要，因为 .single-item 现在充满了许多不同的 HTML 元素。如果您不确定它是什么样子，check the slick slider demo page - 查看页面源代码，然后使用开发人员工具查看源代码以查看其外观的变化。
    • 此外，.single-item 最初从未有任何内容，因此它将呈现零张幻灯片。此时，您已经创建了一个空 slider 。
  3. 您的 setInterval 事件已注册。
  4. 3 秒过去了。
  5. 您的 setInterval 事件首次触发。安XHR生成 item.php，它以 HTML 响应 - 一堆包含数据的样式化 div。
    • 此时，您可以使用开发者工具通过监控网络请求区域来确认 item.php 返回正确的数据。
  6. 您的脚本接受请求响应(HTML)并用它完全替换single-item的内容。
    • 此时应该敲响警钟，因为这会立即导致该元素中的内容(slick 的 HTML 设置)与它所替换的内容之间发生冲突。如果您查看开发人员工具控制台，您甚至可能会发现一些错误是从 slick 中弹出的，提示缺少元素。
  7. 转到第 4 步

发生的情况是，您的 .load 调用正在替换包含平滑 slider 设置的元素的内容，从而完全破坏了 slider 。

您需要做的是改变处理 AJAX 的方式。您应该放弃 .load 并转向使用 $.ajax 以获得更好的回调控制。基于slick docs您可以:

  • 在每个 XHR 请求返回时 - 使用 $('.single-item').slick('unslick'); 销毁 slick slider ，将内容插入 .single-item ，然后重新初始化 slider 。
  • 跟踪当前幻灯片。在每次 XHR 返回时，检测哪些幻灯片存在，哪些不存在，并使用 .slick('slickAdd', HtmlOrDomNode) 和 .slick(' 将它们删除/添加到 slider 中slickRemove'slideIndex)

希望这有帮助。

关于javascript - 自动更新 slider jquery内的div内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35740194/

26 4 0
文章推荐： javascript - 以下 JavaScript 代码中的解释
文章推荐： c++ - QDir::remove() 在特定 SLOT 中调用时总是导致崩溃
文章推荐： javascript - 如何使用 jquery 或 css3 使搜索栏响应
文章推荐： javascript - 单击我们在 css 中添加的图像图标的下拉列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com