对此可能有一个非常简单的解释(并且可能是一种更清洁的方法),但我是新手,不太明白。任何帮助都将有助于学习过程......
我有一个脚本显示一个或另一个基于(show
而不是hide
)用户从下拉列表中选择的内容。像这样:
var PickDiv = (function(){
var _obj = {};
var hideShow = function(elem){
if($(elem).val() === '1'){
$("#slider_action").show();
$("#slider_dollar").hide();
}else if($(elem).val() === '2'){
$("#slider_dollar").show();
$("#slider_action").hide();
}else{
$("#slider_dollar, #slider_action").hide();
}
};
_obj.checkValue = function(){
hideShow($('#build_opt'))
};
var events = function(){
$('#build_opt').change(function(){
hideShow(this);
});
};
$(document).ready(function(){
events ();
checkValue ();
});
return _obj;
}());
这很好用,并根据从下拉列表中选择的内容显示正确的 div。我想我可以稍后在我的代码中重用这个相同的想法来产生相同的效果。显示 div 后(在进行与上述脚本相关的选择之后),我需要提供另一个带有其他选项的下拉列表。用户将选择其中之一,然后将显示一个 div。所以,我想,我可以使用这样的东西:
var RunRate = (function(){
var _obj2 = {};
var hideShow_2 = function(elem_2){
if($(elem_2).val() === '6'){
$("#db_sign").show();
$("#app_down", "#in_redem", "#site_vis", "#cont_ent" ).hide();
}else if($(elem_2).val() === '7'){
$("#app_down").show();
else{
$("#app_down", "#in_redem", "#site_vis", "#db_sign", "#cont_ent" ).hide();
}
};
_obj2.checkValue_2 = function(){
hideShow_2($('#action_type_2'))
};
var events_2 = function(){
$('#action_type_2').change(function(){
hideShow_2(this);
});
};
$(document).ready(function(){
events_2 ();
checkValue_2 ();
});
return _obj2;
}());
当然,这是行不通的。我尝试了许多不同的事情,但没有运气。请注意,如果我从代码中排除第一个脚本,则第二个脚本可以正常工作,所以我知道它可以工作。我猜这与共享一个变量的两个脚本有关,或者与我显然缺少的 jquery 有关。
任何帮助,将不胜感激。总体而言,希望能够在不相互干扰的情况下执行许多这些类型的相关下拉菜单。
谢谢你的帮助!
更新:
请注意,如果在第二个脚本中,我替换:
$(document).ready(function(){
和
$( window ).load(function() {
那么问题就解决了。因此,显然问题与 document.ready 相互干扰有关,但如果没有上面的“hack”,我不知道如何解决这个问题,特别是如果我想使用更多这些相关的下拉菜单。有没有办法传递一个不同的变量并调用它而不是document
?
更新 2
找出问题所在...由于未定义的引用(checkValue
),我的原始代码引发了错误。该错误导致文档准备好在第二个函数中不起作用。在下面的答案中引用了更详细的解释。