时间戳

首页 > 解决方案 > 使用 JavaScript 和 HTML 随机循环浏览小部件

javascript - 使用 JavaScript 和 HTML 随机循环浏览小部件

问题描述

我已经构建了几个小部件，并且希望在刷新网页时填充不同的小部件。我仍然是相当新的 JavaScript 编写者，我似乎无法让代码工作。

请参阅下面的 HTML 和 JavaScript 代码

$(document).ready(function () {
  // Array of files to load via AJAX
  var files = [
    'wedding.html',
    'wellness.html',
    'sports.html'
  ];
  var url = files[Math.floor(Math.random() * files.length)];
  $.get(url, function (data) {
    $('#c5Atrium').html(data);
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
    <title>C5 Widget</title>
</head>

<body>
    <!-- Start code for c5 widget -->
    <div id="c5widget"></div>
    <script type="text/javascript" src="http://sever-path.com/c5_widget.js"></script>
    <!-- End code for c5 widget -->
</body>

</html>

标签： javascriptjqueryhtml

解决方案

html 中的 DIV 称为“c5widget”，但您正试图通过 id“#c5Atrium”访问它

改变

$('#c5Atrium').html(data);

到

$('#c5widget').html(data);

或者“c5widget”可能用于其他用途，而您缺少 id 为“c5Atrium”的 div。在这种情况下，添加一个 id 为“c5Atrium”的 div

<div id="c5Atrium"></div>

推荐阅读