个人中心
gpt4 book ai didi

jquery - 前端 jQuery 代码无法使用 Node.js 正确执行

转载 作者：行者123 更新时间：2023-11-27 23:07:15 25 4
gpt4 key购买 nike

我有一个自动图像滚动器 div，它由一个由小图像组成的 ul 组成。目标是拥有一个简单的滚动条，该滚动条在页面加载后立即开始。当我在本地浏览器中简单地运行代码(Html、CSS 和带有 jquery 的 js 文件)时，它工作得很好，但当应用程序运行 Node 服务器时，它不会按预期执行。

我试图确保我的 jQuery 被识别，并在操作滚动条的主要代码周围包含一个包装 $(window).on("load") 函数。我研究过的许多类似帖子都存在这个问题。我还仔细检查了服务器是否正在加载外部文件，确实如此。函数内的控制台日志显示在 chrome 控制台中，没有抛出任何错误。同时查看 chrome 控制台会显示必要的图像和加载到页面中的外部脚本。在外部函数中测试更多日志记录值表明正在访问资源，所以这可能是 jQuery + Node 的同步问题？任何帮助将不胜感激。

jQuery

$(window).on("load", function () {

   $(function () {
       var scroller = $('#scroller div.innerScrollArea');
       var scrollerContent = scroller.children('ul');
       scrollerContent.children().clone().appendTo(scrollerContent);
       var curX = 0;
       scrollerContent.children().each(function () {
           var $this = $(this);
           $this.css('left', curX);
           curX += $this.outerWidth(true);
       });
       var fullW = curX / 2;
       var viewportW = scroller.width();

       var controller = { curSpeed: 0, fullSpeed: 1 };
       var $controller = $(controller);
       var tweenToNewSpeed = function (newSpeed, duration) {
           if (duration === undefined) {
               duration = 600;
               $controller.stop().animate({ curSpeed: newSpeed }, duration);
           }

       };
       var doScroll = function () {
           var curX = scroller.scrollLeft();
           var newX = curX + controller.curSpeed;
           if (newX > fullW * 2 - viewportW)
               newX -= fullW;
           scroller.scrollLeft(newX);

       };
       setInterval(doScroll, 20);
       tweenToNewSpeed(controller.fullSpeed);
       console.log("foo")
       console.log(scrollerContent);

   });
});

服务器文件

var express = require("express");
var db = require("./models/company.js");


var app = express();

var PORT = process.env.PORT || 8080;

app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static( __dirname + "/public"));


require("./routes/htmlRoutes.js")(app);
require("./routes/apiRoutes.js")(app);

db.sequelize.sync({ force: false }).then(function() {
  app.listen(PORT, function () {
    console.log("App listening on PORT: " + PORT);
  });
})
module.exports = app;

相关的 CSS

#scroller {
    position: relative;
}
#scroller .innerScrollArea {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#scroller ul {
    padding: 0;
    margin: 0;
    position: relative;
}
#scroller li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: absolute;
    margin-left: 1%;
    margin-right: 1%;
}

相关代码来自index.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/index.css">


    <title>RepoMan</title>
</head>
...
    <!--AD Space-->
    <div id="scroller" style="width: 1110px; height: 75px; margin: 0 auto;">
        <div class="innerScrollArea">
            <ul>
                <!-- Define photos here -->
                <li><img class="ad-img" src="assets/images/sidebar/sm-allied.gif" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-baja.gif" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-bigtime.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-det.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-dyn.gif" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-ken.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-locating.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-minuteman.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-nams.jpeg" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-rec.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-recmng.gif" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-repfl.png" /></li>
                <li><img class="ad-img" src="assets/images/sidebar/sm-rsig.gif" /></li>
            </ul>
        </div>
    </div>
...


    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="assets/js/index.js"></script>



</body>

</html>

包.json

{
  "name": "UW2",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jquery": "^3.4.1",
    "mysql2": "^1.7.0",
    "nodemon": "^1.19.4",
    "sequelize": "^5.21.1"
  }
}

最佳答案

你包括了吗 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>在你的index.html ？

关于jquery - 前端 jQuery 代码无法使用 Node.js 正确执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58684170/

25 4 0
文章推荐： html - 为什么图像边框设置为内联 block
文章推荐： javascript - HTML5 服务器发送的事件不是实时的？
文章推荐： c++ - 计算 vector 中的位
文章推荐： Javascript:结合悬停和点击事件
行者123
个人简介

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

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