jquery - jQueryで関数に名前を付ける

Question

このjQuery関数に「showElements」のような名前を付けたいと思います。どうやってやるの？

$(function () {
    $("#sortable").sortable({
        revert: true
    });
    $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $("ul, li").disableSelection();
});

Answer 1

まず、 jQueryライブラリをインクルードしてから、次の操作を行う必要があります。

<script type="text/javascript">
    function showElements()
    {
        $("#sortable").sortable({
            revert: true
        });
        $("#draggable").draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
        $("ul, li").disableSelection();
    }
</script>

Answer 2

この場合、関数を jQuery グローバル ($) でラップする必要はありません。次のような関数を作成するだけです。

function showElements() {
$("#sortable").sortable({
    revert: true
});
$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});
$("ul, li").disableSelection();
}

Answer 3

何かのようなもの：

<script type="text/javascript">
    var showElements = function () {
        $("#sortable").sortable({
            revert: true
        });
        $("#draggable").draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
        $("ul, li").disableSelection();
    };

    $(function(){
        showElements();
    });
</script>

Answer 4

jQuery プラグインとして:

(function ($,undefined) {
    $.showElements = function () {
        $("#sortable").sortable({
        revert: true
        });
        $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
        });
        $("ul, li").disableSelection();
    };
}(jQuery));

次のように使用します。$.showElements();

通常の関数として：

var showElements = function () {
    $("#sortable").sortable({
    revert: true
    });
    $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
    });
    $("ul, li").disableSelection();
};

次のように使用してください:showElements(); 壊れやすい: グローバル スコープを汚染しています。