jQuery函數拆分為單獨的函數

Question

我在javascript中有這個

$(document).ready(function () {

    $(".terms").hide();

    $("#Options").change(function () {
        var optionId = $(this).val();
        if (optionId == 0) {
            $(".options").hide();
        }
        else {
            var option = $(this).find(":selected").text();
            option = option.split(' ').join('_')
            $(".options").find("#options_link").attr("href", "Options/+option+.html")
            $(".options").show();
        }
    });
});

基本上我想在讀取的頁面以及選項的.change上調用此方法

我將如何將此功能拆分為自己的功能？ 我很困惑的主要部分是如何將$（this）傳遞給我將要創建的新函數

更新資料

我現在正在使用此代碼

$(document).ready(function () {
    $(".terms").hide();
    $("#Options").change(updateOptions); // onchange
    $.proxy(updateOptions, $('#Options'))(); // onload
});

function updateOptions() {
    var optionId = $(this).val();
    if (optionId == 0) {
        $(".options").hide();
    }
    else {
        var option = $(this).find(":selected").text();
        option = option.split(' ').join('_')
        $(".options").find("#options_link").attr("href", "Options/" + option + ".html")
        $(".options").show();
    }
});

但基本上，我想在頁面加載時也調用此方法。 我無法使用UpdateOptions（），因為（this）不會是什么？

Answer 1

您只需要將邏輯與函數分離，並在相關事件下調用它即可。 嘗試這個：

$(document).ready(function () {
    $(".terms").hide();
    $("#Options").change(updateOptions); // onchange
    $.proxy(updateOptions, $('#Options'))(); // onload
});

function updateOptions() {
    var optionId = $(this).val();
    if (optionId == 0) {
        $(".options").hide();
    }
    else {
        var option = $(this).find(":selected").text();
        option = option.split(' ').join('_')
        $(".options").find("#options_link").attr("href", "Options/" + option + ".html")
        $(".options").show();
    }
});

請注意，我用$.proxy維護的范圍this函數內。 我還修復了我認為應該是option變量的字符串連接的問題。

Answer 2

您可以在定義onchange處理程序之后立即調用change() ：

$("#Options").change(function () {
    var optionId = $(this).val();
    if (optionId == 0) {
        $(".options").hide();
    }
    else {
        var option = $(this).find(":selected").text();
        option = option.split(' ').join('_')
        $(".options").find("#options_link").attr("href", "Options/+option+.html")
        $(".options").show();
    }
}).change(); //append change() here

對於那些不理解這個簡單答案（包括OP）的人，請嘗試閱讀有關change（）的 jQuery文檔。

Answer 3

您可以定義一個單獨的函數，然后在每個事件中調用它們，例如：

$(document).ready(function () {
        $(".terms").hide();

        options($("#Options"));
        $("#Options").change(function(){
            options($(this));
        })
    });

    function options(optionsElem) {
            var optionId = optionsElem.val();
            if (optionId == 0) {
                $(".options").hide();
            }
            else {
                var option = optionsElem.find(":selected").text();
                option = option.split(' ').join('_')
                $(".options").find("#options_link").attr("href", "Options/+option+.html")
                $(".options").show();
            }
        });

Answer 4

而不是通過這你可以做任何功能...

$(document).ready(function () {

    $(".terms").hide();

    $("#Options").change(function () {
       Myfun();
    });

    function Myfun(){

        var optionId = $("#Options").val();
        if (optionId == 0) {
            $(".options").hide();
        }
        else {
            var option = $("#Options").find(":selected").text();
            option = option.split(' ').join('_')
            $(".options").find("#options_link").attr("href", "Options/+option+.html")
            $(".options").show();
        }
    }
});

您也可以在加載時調用此函數。