6

我有一个问题，如果您不介意，我希望您指导我解决它……在我的 HTML 源代码中，到处都有几段 css 代码。所以我决定放在一个名为 principal.css 的文件中，并在 head 部分执行以下操作

<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);
    });

有什么特殊的方法可以做到这一点吗？我的目标是页面的代码量最少，我留下良好的缩进、文档和干净。您好，我将等待您的答复！请原谅我的英语...

4

5 回答 5

6

您需要将其包装在 $(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() 分成单独的语句。但我认为这是一个偏好问题。

于 2013-08-18T02:38:37.003 回答
4

.ready()文档

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

或者

.load()文档

$(window).on('load', function(){
    // your code here
});
于 2013-08-18T02:40:17.963 回答
2

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

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

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

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

例如：

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

这是因为浏览器解释HTML器从.TOP to BOTTOMdocument.readyJavaScriptdocument elements are loaded

于 2013-08-18T02:41:31.630 回答
1

头：

<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);
        });
});
于 2013-08-18T02:43:27.150 回答
0

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

<script>
  //js code

</script>

...脚本标签在一个单独的 js 文件中。

于 2013-08-18T02:50:56.113 回答