jQuery的页面加载触发已定义绑定变化

我的代码：jQuery的页面加载触发已定义绑定变化

<!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事件
用户选择的值与鼠标或箭头向上/向下键显示/隐藏图层

我的问题是如果th ere是jQuery中的一个内置函数，它不但可以设置列表的选定值，还可以激发其绑定的函数。

我有一个解决方法，它是删除显示/隐藏层在其自己的功能，并触发更改/键盘和初始加载。

这是最好的方法吗？

来源

2012-08-25 Gu Ming Peng

以上是解决上述问题的方法，但有没有更简单，更高效的方法？也许不是？ http://jsfiddle.net/86MPT/14/ –

你可以切换到来电绑定到它

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>

来源

2012-08-25 03:55:35 Bob

嘿鲍勃，感谢您的快速响应。这是我提到的替代解决方案。我唯一的犹豫，我认为有一个“最佳实践”的方法... http://jsfiddle.net/86MPT/14/ –

确实每个选定的值有它自己的函数来调用？ – Bob

正如我所见，您的方法没有问题。您可以尝试遵循“DRY原则”。 :) – Bob

尝试用更少的代码这一个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(); 

}

来源

2012-08-25 07:01:34

jQuery的页面加载触发已定义绑定变化

回答

相关问题