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（），因为（这个）什么都没有？

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

您可以在定义change()处理程序后立即调用onchange：

$("#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();
        }
    }
});

您也可以调用此函数onload。

Jquery函数拆分为单独的函数

4 个答案: