页面加载触发已定义绑定更改的 jQuery答案

【问题标题】：jQuery on page load trigger already defined bind change页面加载触发已定义绑定更改的 jQuery
【发布时间】：2012-08-25 03:38:24
【问题描述】：

我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TEST</title>
</head>

<body>
    How can I get the code to fire on load, maintaining the change/keypress?<br/>
<select id="textFieldId" name="textFieldId">
    <option value="1">End Date</option>
    <option value="2">End Date Plus 30</option>
    <option value="3">End Date Plus Custom</option>
    <option value="4">Print Date Plus Custom</option>
    <option value="5">Static Expiration Date (New)</option>
</select>
    <pre id="ONE">If user selects 1</pre>
    <pre id="TWO">If user selects 2</pre>
    <pre id="THREE">If user selects 3</pre>
    <pre id="FOUR">If user selects 4</pre>
    <pre id="FIVE">If user selects 5</pre>
</body>
</html>


$(document).ready(function(){
    $("#textFieldId").val("3").change();
    $("#textFieldId").on("change keyup", function(){
        var selectedVal = $(this).val();
        $("pre").hide();
        if(selectedVal == "1"){
            $("pre#ONE").show();
        }
        else if(selectedVal == "2"){
            $("pre#TWO").show();
        }
        else if(selectedVal == "3"){
            $("pre#THREE").show();
        }
        else if(selectedVal == "4"){
            $("pre#FOUR").show();
        }
        else{
            $("pre#FIVE").show();
        }
        return false;
    });
});

JSfiddle here

页面具有绑定了更改/keyup 事件的下拉列表
用户使用鼠标或向上/向下箭头键选择一个值以显示/隐藏页面上的图层

我的问题是 jQuery 中是否有一个内置函数，它不仅可以让我设置列表的选定值，还可以触发它绑定的函数。

我有一个解决方法，即在它自己的函数中删除显示/隐藏层，并在更改/键控和初始加载时触发它。

这是最好的方法吗？

【问题讨论】：

这是解决上述问题的方法，但有没有更短、更有效的方法？也许不是？ jsfiddle.net/86MPT/14

标签： jquery bind keypress onchange

【解决方案1】：

你可以通过 switch 调用绑定到它的函数

FIDDLE DEMO

$(document).ready(function(){
    $("#textFieldId").val("3").change();
    $("#textFieldId").on("change keyup", myFunction);
});

function myFunction(){
    var selectedVal = $(this).val();
    $("pre").hide();
    $("#id" + selectedVal).show();
    switch(selectedVal){
        case "1":
            //call a function
        break;
        case "2":
            //call a function
        break;           
    }       
    return false;
}

HTML - 稍微修改了pre id

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TEST</title>
</head>

<body>
    How can I get the code to fire on load, maintaining the change/keypress?<br/>
<select id="textFieldId" name="textFieldId">
    <option value="1">End Date</option>
    <option value="2">End Date Plus 30</option>
    <option value="3">End Date Plus Custom</option>
    <option value="4">Print Date Plus Custom</option>
    <option value="5">Static Expiration Date (New)</option>
</select>
    <pre id="id1">If user selects 1</pre>
    <pre id="id2">If user selects 2</pre>
    <pre id="id3">If user selects 3</pre>
    <pre id="id4">If user selects 4</pre>
    <pre id="id5">If user selects 5</pre>
</body>
</html>

【讨论】：

嗨，鲍勃，感谢您的快速回复。这是我提到的替代解决方案。我唯一的犹豫是我认为有“最佳实践”方法...jsfiddle.net/86MPT/14
每个选定的值是否都有自己的函数可以调用？
我认为你的方法没有问题。您可以尝试关注DRY principle。 :)

【解决方案2】：

用更少的代码试试这个JSFIDDLE

$(document).ready(function(){
    // INITIAL LOAD OF SCREEN - PRELOAD DATA
    myFunction("4");

    // SUBSEQUENT ACTIO NFROM USER
    $("#textFieldId").on("change keyup", function(){
       myFunction($(this).val());
        return false;
    });
});

function myFunction(i){
     var selectedVal = i;
        $("pre").hide();
        var temp = '#id'+selectedVal
        $(temp).show();

}

【讨论】：