6

問題が発生したので、よろしければ解決方法を教えていただきたいのですが... 私のHTMLソースコードには、ところどころにいくつかのcssコードがありました。そこで、principal.css というファイルにまとめて、head セクションで次のことを行うことにしました。

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

これは見事に機能しました！私の考えは、HTML の JavaScript コードで同じことをすることでしたが、うまくいきませんでした。これはそれらの1つです：

$("[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 BOTTOMためです。document.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 に答える