Question

我有一个问题，如果你不介意，我希望你指导我解决它... 在我的HTML源代码中有几个css代码。所以我决定将一个名为principal.css的文件放在一起，并在头部

中执行以下操作

<link href="css/principal.css" rel="stylesheet" type="text/css" />

这非常有效！我的想法是对我的HTML中的javascript代码做同样的事情，但它没有奏效。这是其中之一：

$("[data-slider]")
    .each(function () {
    var input = $(this);
    $("<span>")
        .addClass("output")
            .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
    $(this)
        .nextAll(".output:first")
            .html(data.value);
    });

有一些特殊的方法吗？我的目标是页面具有最少的代码，我留下缩进，记录和清理。问候，我将等待你的回答！请原谅我的英语......

Answer 1

您需要将其包装在$（document）.ready（...）

中

此外，它有不寻常的缩进。格式化它可能会更好：

$(document).ready(function() {
    $("[data-slider]").each(function () {
        var input = $(this);
        $("<span>").addClass("output").insertAfter($(this));
    }).bind("slider:ready slider:changed", function (event, data) {
        $(this).nextAll(".output:first").html(data.value);
    });

});

我个人不喜欢连续连接这么多命令。它可能会更加高效，但它使调试和修复问题变得更加困难。我个人会将.each（）和.bind（）分解为单独的语句。但我认为这是一个偏好问题。

Answer 2

.ready()文档

$(document).ready(function(){
    // your code here
});

或

.load()文档

$(window).on('load', function(){
    // your code here
});

Answer 3

将js代码放在单独的.js文件中。类似于CSS也放在一个单独的文件中，然后将其链接到您的html文件。

就像这样，在你的html文件中：

<script src="somejsfile.js"></script>

是的，您必须将您的js代码包装在document.ready函数中，以便在文档元素加载完成后执行。

例如：

$(document).ready(function() {
    // Your JS code here
});

这是因为浏览器HTML解释程序从TOP to BOTTOM读取代码，因此，如果您未设置document.ready，则JavaScript将在您{{1}之前运行}}。

Answer 4

目：

<head>
  <link href="css/principal.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="myscript.js"></script>
</head>

myscript.js

$(function() {    
    $("[data-slider]")
        .each(function () {
        var input = $(this);
        $("<span>")
            .addClass("output")
                .insertAfter($(this));
        })
        .bind("slider:ready slider:changed", function (event, data) {
        $(this)
            .nextAll(".output:first")
                .html(data.value);
        });
});

Answer 5

我想补充一点，如果你打算将你的js代码放在一个单独的文件中，这是一个好主意。你应该知道你不必使用......

<script>
  //js code

</script>

...脚本标记在单独的js文件中。

在HEAD部分中将JS代码从HTML移动到源代码

5 个答案: