2017-03-03 132 views
-1

我想在节上插入动态html元素。 例如,当我需要三列时,我将首先调用循环,其中有3个动态html部分。当我需要两列时,我会调用第二个循环,其中有2个动态html部分。我认为我需要切换案例来选择我需要的循环,但这有可能吗? for循环内部switch语句。下面,for循环里面的switch语句在javascript中

switch(){ 
    case 1; 
     for(var d = 0; d<3; d++){trigger} 
    case 2; 
     for(var a = 0; a<2; a++){trigger} 
    case 3; 
     trigger; 
} 

$(function(){ 
 
    \t for(var d = 0; d<3; d++){ 
 
\t \t \t \t $("#section").append("<article id='menu_'" + d + ">menu</div>"); 
 
\t \t \t 
 
\t \t \t \t var cssObj = { 
 
\t \t \t \t \t 'width' : '33%', 
 
\t \t \t \t \t 'background' : 'blue', 
 
\t \t \t \t \t 'float' :"left", 
 
\t \t \t \t \t 'border':"1px solid #aaa" 
 
\t \t \t \t } 
 

 
\t \t \t \t 
 
\t \t \t \t $("#section").children("#menu_").css(cssObj); 
 
\t \t \t } 
 

 
\t \t \t for(var a = 0; a<2; a++){ 
 
\t \t \t \t $("#section1").append("<article id='menu_'" + a + ">menu</div>"); 
 

 
\t \t \t \t var cssObj = { 
 
\t \t \t \t \t 'width' : '49.6%', 
 
\t \t \t \t \t 'background' : 'yellow', 
 
\t \t \t \t \t 'float' : 'left', 
 
\t \t \t \t \t 'border' : '1px solid #aaa' 
 
\t \t \t \t } 
 

 
\t \t \t \t $("#section1").children("#menu_").css(cssObj); 
 
\t \t \t } 
 

 
\t \t \t $("#section2").append("<article id='menu_'>menu</div>") 
 
\t \t \t var cssObj = { 
 
\t \t \t \t 'width' : '99.7%', 
 
\t \t \t \t 'background' :'green' 
 
\t \t \t } 
 

 
\t \t \t $("#section2").children("#menu_").css(cssObj); 
 

 

 

 

 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="section"> 
 
\t \t \t 
 
</div> 
 

 
<div id="section1"> 
 

 
</div> 
 

 
<div id="section2"> 
 

 
</div>

+0

代替具有根据遇到哪种情况执行的循环。我会创建一个函数,它接受一个int参数并将其指定为循环控制变量。 –

回答

1

我的建议是使用switch定义的次数,你会调用触发,做外面的循环:

switch(val){ // whatever val you're testing 
case 1: 
    n =3; 
    break; 
case 2: 
    n =2; 
    break; 
case 3: 
    n=1; 
} 
for(var d = 0; d<n; d++){trigger} 
+0

这很酷,但如果var cssObj不同?如果三列,宽度必须为33.33%。如果两列,宽度必须是50%。你的建议看起来像循环触发器是一样的。 –

+0

我相信你的问题并不完全是“如何在switch语句中调用'for'loop”,而是与动态大小相关的一些页面结构。我建议你编辑你的问题,并澄清你到底想要做什么。 – 2017-03-03 01:02:48