it-swarm-ja.com

js newbからのjsスクリプトの結合

私は自分のwpサイトに、私のすべての小さいjsスクリプトを追加した小さい.jsファイルを持っています。それは完璧に動作しますが、私は別のスクリプトで追加する方法を見つけようとして立ち往生しています。これまでのところjslintは私の現在のファイルについて文句を言わず、それは大丈夫だと言います。

私のスクリプト:

jQuery(function ($) {
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    return false;
});

jQuery('.jcarousel-scroll select').bind('change', function() {
    carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
    return false;
});

// Next Button
$('#mycarousel-next').bind('click',
function() {
    carousel.next();
    return false;
});

// Prev Button
$('#mycarousel-prev').bind('click',
function() {
    carousel.prev();
return false;
});
};
}

追加したいスクリプトは次のようになります。

jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
    delay:                     3000, // in milliseconds
 });
});

私が行き詰まっているのは、私がjQuery(document)の部分で始まるスクリプトをたくさん見つけているということです。そのように始まるスクリプトを追加しようとすると、すべてが壊れます。

これは本当に愚かな質問だと思いますが、新しいアドオンスクリプトを変更して、現在のファイルでうまく動作するようにするにはどうすればよいですか。

これについてあなたの助けと時間をありがとう。ここでは遅いプロセスですが、jsを勉強しようと努力しています。

1
shawn

jQuery(document).ready イベントは、ドキュメントDOMを操作する準備が整ったときに呼び出されます。以前はすべてのハンドラをdocument.loadにアタッチしていましたが、これはすべてのイメージもロードされるまで待機します。ほとんどの場合、これは不要です。

このイベントにフックするには3つの同等の方法と、ほぼ同等の4番目の方法があります。

// Long form
jQuery(document).ready(function() {
    // Your handler
});

// Short form
jQuery(function() {
    // Your handler
});

// Intermediate form (not recommended)
jQuery().ready(function() {
    // Your handler
});

// Classic event binding - will not be executed again if you hook it too late
jQuery(document).bind("ready", function() {
    // Your handler
});

jQueryの代わりに$が使用されているのを見ることがあります。これは短絡されているので簡単ですが、他のJSライブラリーでも使用されています。他の人に上書きされないようにするために、jQueryは noConflictモード で実行できます。これは$は使用されず、jQueryのみが使用されることを意味します。しかし、あなたのreadyハンドラへの最初の引数はjQueryオブジェクト自身になるでしょう。つまり、function($) {}のようにハンドラーを書くことができ、関数の中で$を使うことができます。

だからあなたのコードはこのようなものになるでしょう:

jQuery(function ($) {
    function mycarousel_initCallback(carousel) {
        jQuery('.jcarousel-control a').bind('click', function() {
            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
            return false;
        });

        jQuery('.jcarousel-scroll select').bind('change', function() {
            carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
            return false;
        });

        // Next Button
        $('#mycarousel-next').bind('click',
        function() {
            carousel.next();
            return false;
        });

        // Prev Button
        $('#mycarousel-prev').bind('click',
        function() {
            carousel.prev();
        return false;
        });
    };

    // We are already in the 'ready' event handler, no need to hook into it again
    // Just add our code here!
    var gallery = $('#thumbs').galleriffic({
        delay:                     3000, // in milliseconds
    });
}

より純粋なJavaScriptの質問がある場合は、私たちの "親"サイト、 スタックオーバーフロー で質問してください。彼らは たくさんのjQueryの専門知識 をそこに持っています。

3
Jan Fabry