对不起代码墙。 我试图尽可能地简化它。 我的控制台输出位于底部。 我有一个两个视图页面。 为了促进代码模块化,我的页面结构如下:
<html> <head> <script src="js/jquery.js"></script> <script src="js/view1.js"></script> <script src="js/view2.js"></script> <script src="js/main.js"></script> <style> #view2 { display: none; } #view3 { display: none; } </style> </head> <body> <div id="view1" class="box"> <div>View1</div> <button class="btn-show2">View2</button> <button class="btn-show3">View3</button> <button class="btn-echo">Echo Val</button> </div> <div id="view2" class="box"> <div>View2</div> <button class="btn-back">Back</button> <button class="btn-echo">Echo Val</button> </div> <div id="display-out"></div> </body> </html>现在每个“视图”都有自己的关联JS文件,如下所示。 例如view1.js是:
$(document).ready(function(e) { $("#view1 .btn-show2").click(function(e) { showContainer("view2"); }); handlers['btn-echo']['view1'] = function(params) { $("#display-out").html("View1 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view1'] = function(params) { console.log('view1 init routine. Active View is ' + active_view); }; destroy['view1'] = function(params) { console.log('view1 destroy routine. Clean up view 1'); }; });和view2.js是:
$(document).ready(function(e) { $("#view2 .btn-back").click(function(e) { showContainer("view1"); }); handlers['btn-echo']['view2'] = function(params) { $("#display-out").html("View2 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view2'] = function(params) { console.log('view2 init routine. Active View is ' + active_view); }; destroy['view2'] = function(params) { console.log('view2 destroy routine. Clean up view 2'); }; });最后,main.js具有以下结构:
var active_view = null; var handlers = []; var init = []; var destroy = []; $(document).ready(function(e) { active_view = "view1"; init['view1'](); }); handlers['btn-echo'] = []; $(document).on('click', '.btn-echo', function(e) { console.log("In initial click delegatorm active_view is " + active_view + "!!"); if(handlers['btn-echo'] != null && typeof handlers['btn-echo'][active_view] == "function") { handlers['btn-echo'][active_view]("LOL"); } }); function showContainer(container_id, data) { $("body .box").each(function(e) { var id = $(this).attr('id'); if(id == container_id) { active_view = container_id; console.log("In showContainer, active_view is now " + active_view + "!!"); if(typeof init[id] == "function"){ init[id](""); } $(this).slideDown(); }else{ if(active_view = id && typeof destroy[id] == "function") { destroy[id](); } $(this).slideUp(); } }); }正如您所看到的,当视图更改时,全局active_view会更改(来自showContainer)。 但是这是以下控制台输出:
view1 init routine. Active View is view1 view1.js:11 //Start on view1 In initial click delegatorm active_view is view1!! test.html:45 //Click Echo view1 destroy routine. Clean up view 1 view1.js:15 //Click switch to view2 In showContainer, active_view is now view2!! test.html:56 view2 init routine. Active View is view2 view2.js:11 In initial click delegatorm active_view is false!! //Click echo again这里发生了什么? 为什么active_view会变错?
Sorry for the wall of code. I tried to simplify it as much as possible. My console output is at the bottom. I have a two view page. In order to promote code modularity my page structure is as follows:
<html> <head> <script src="js/jquery.js"></script> <script src="js/view1.js"></script> <script src="js/view2.js"></script> <script src="js/main.js"></script> <style> #view2 { display: none; } #view3 { display: none; } </style> </head> <body> <div id="view1" class="box"> <div>View1</div> <button class="btn-show2">View2</button> <button class="btn-show3">View3</button> <button class="btn-echo">Echo Val</button> </div> <div id="view2" class="box"> <div>View2</div> <button class="btn-back">Back</button> <button class="btn-echo">Echo Val</button> </div> <div id="display-out"></div> </body> </html>Now each "view" has it's own associated JS file as follows. For example view1.js is:
$(document).ready(function(e) { $("#view1 .btn-show2").click(function(e) { showContainer("view2"); }); handlers['btn-echo']['view1'] = function(params) { $("#display-out").html("View1 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view1'] = function(params) { console.log('view1 init routine. Active View is ' + active_view); }; destroy['view1'] = function(params) { console.log('view1 destroy routine. Clean up view 1'); }; });and view2.js is:
$(document).ready(function(e) { $("#view2 .btn-back").click(function(e) { showContainer("view1"); }); handlers['btn-echo']['view2'] = function(params) { $("#display-out").html("View2 Custom Msg, Params : " + params + ", Active View: " + active_view + ", Random: " + Math.random()); }; init['view2'] = function(params) { console.log('view2 init routine. Active View is ' + active_view); }; destroy['view2'] = function(params) { console.log('view2 destroy routine. Clean up view 2'); }; });Finally, main.js has the following structure:
var active_view = null; var handlers = []; var init = []; var destroy = []; $(document).ready(function(e) { active_view = "view1"; init['view1'](); }); handlers['btn-echo'] = []; $(document).on('click', '.btn-echo', function(e) { console.log("In initial click delegatorm active_view is " + active_view + "!!"); if(handlers['btn-echo'] != null && typeof handlers['btn-echo'][active_view] == "function") { handlers['btn-echo'][active_view]("LOL"); } }); function showContainer(container_id, data) { $("body .box").each(function(e) { var id = $(this).attr('id'); if(id == container_id) { active_view = container_id; console.log("In showContainer, active_view is now " + active_view + "!!"); if(typeof init[id] == "function"){ init[id](""); } $(this).slideDown(); }else{ if(active_view = id && typeof destroy[id] == "function") { destroy[id](); } $(this).slideUp(); } }); }As you can see the global active_view gets changed when the view is changed (from showContainer). However here is the following console output:
view1 init routine. Active View is view1 view1.js:11 //Start on view1 In initial click delegatorm active_view is view1!! test.html:45 //Click Echo view1 destroy routine. Clean up view 1 view1.js:15 //Click switch to view2 In showContainer, active_view is now view2!! test.html:56 view2 init routine. Active View is view2 view2.js:11 In initial click delegatorm active_view is false!! //Click echo againWhat is going on here? Why does active_view become false?
最满意答案
从查看CSS,您有3个容器.box 。 所以它意味着在你的循环showContainer ,你将有3次迭代。
现在,您将进入视图#2,但最后一次迭代在#3上。 现在让我们看看会发生什么(我们跳过第一次迭代):
//Loop 2 var id = $(this).attr('id'); //id = 'view2' if(id == container_id) // 'view2' == 'view2' : true active_view = container_id; active_view = 'view2' //Loop 3 var id = $(this).attr('id'); //id = 'view3' if(id == container_id) // 'view3' == 'view2' : false else if(active_view = id && typeof destroy[id] == "function") // Your probleme is here你看,这里有一个拼写错误,它应该是active_view == ... 现在,您要为active_view分配值
正在做的是一步一步:
active_view = id && typeof destroy[id] == "function"; //Step 1 active_view = 'view3' && typeof destroy[id] == "function"; //Step 2 active_view = true && typeof destroy[id] == "function"; //Step 3; Since left side is true, interpret right side active_view = typeof destroy[id] == "function"; //Step 4 active_view = typeof destroy['view3'] == "function"; //Step 5 active_view = false; //Step 6; Since the result in your log is false, I suppose destroy['view3'] is not a functionFrom looking at your CSS, you have 3 container .box. So it mean in your loop showContainer, you'll have 3 iteration.
Now, you are going to the view #2 but the last iteration is on the #3. now let see what happen (we skip the first iteration):
//Loop 2 var id = $(this).attr('id'); //id = 'view2' if(id == container_id) // 'view2' == 'view2' : true active_view = container_id; active_view = 'view2' //Loop 3 var id = $(this).attr('id'); //id = 'view3' if(id == container_id) // 'view3' == 'view2' : false else if(active_view = id && typeof destroy[id] == "function") // Your probleme is hereYou see, you have a typo here, it should be active_view == .... Now you are assigning a value to active_view
what is is doing step by step :
active_view = id && typeof destroy[id] == "function"; //Step 1 active_view = 'view3' && typeof destroy[id] == "function"; //Step 2 active_view = true && typeof destroy[id] == "function"; //Step 3; Since left side is true, interpret right side active_view = typeof destroy[id] == "function"; //Step 4 active_view = typeof destroy['view3'] == "function"; //Step 5 active_view = false; //Step 6; Since the result in your log is false, I suppose destroy['view3'] is not a function更多推荐
发布评论