2013-08-28 68 views
0

我会通过措辞加以解释+截图Javascript循环逻辑

我有三个容器,其中包含以下下面。

enter image description here

他们每个人都有不同的ID和同一类。

<div id="container" class='list-cont'> 
    <h2> One Two Three Four</h2> 
</div> 

<div id="container-1" class='list-cont'> 
    <h2> Four Five Six </h2> 
</div> 

<div id="container-2" class='list-cont'> 
    <h2> Seven Eight Nine Ten Eleven</h2> 
</div> 

我在做什么,使每个容器的第一句话的一半成不同颜色的目的,其余的都是不同的颜色太深,像这样的。但主要问题是,代码不断循环,我不知道它为什么发生,页面重新加载不停。

enter image description here

代码:

//Count total number of div's which has a class of list-cont 
var div_items = $(".list-cont").length; 

for (var q = 1; q <= div_items; q++) { 
    //If 1 the container who doesn't have "-" will get an update 
    if (q = 1) { 

    //Get value of h2 of the container who doesn't have "-" 
    var s = $('div#container h2').html(); 

    s = s.replace(/(^\s*)|(\s*$)/gi,""); 
    s = s.replace(/[ ]{2,}/gi," "); 
    s = s.replace(/\n /,"\n"); 

    //Number of words 
    var str_length = s.split(' ').length; 

    //Words in an array 
    var str_array = s.split(' '); 

    //Get total of first half of words 
    var len_first = Math.round(str_length/2); 

    //Delete Value of h2 
    $("div#container h2").html(''); 

    for (var ctr = 0; ctr < str_length; ctr++) { 
     if (ctr >= len_first) { 
     $("div#container h2").append(" <font color='#fdbd16'>"+ str_array[ctr] +"</font> "); 
     } else { 
     $("div#container h2").append(" " + str_array[ctr] + " "); 
     } 
    } 
    } else { 
    //Container has "-" like container-1 or container-2 

    //Get value of h2 of the container who doesn't have "-" 
    var s = $('div#container-'+ q +' h2').html(); 

    s = s.replace(/(^\s*)|(\s*$)/gi,""); 
    s = s.replace(/[ ]{2,}/gi," "); 
    s = s.replace(/\n /,"\n"); 

    //Number of words 
    var str_length = s.split(' ').length; 

    //Words in an array 
    var str_array = s.split(' '); 

    //Get total of first half of words 
    var len_first = Math.round(str_length/2); 

    //Delete Value of h2 
    $("div#container-"+ q +" h2").html(''); 

    for (var ctr = 0; ctr < str_length; ctr++) { 
     if (ctr >= len_first) { 
     $("div#container-"+ q +" h2").append(" <font color='#fdbd16'>"+ str_array[ctr] +"</font> "); 
     } else { 
     $("div#container-"+ q +" h2").append(" " + str_array[ctr] + " "); 
     } 
    } 
    } 
} 

回答

2

有很多你的代码错误,但件事是进行循环,无限是这个

for (var q = 1; q <= div_items; q++) { 
    if (q = 1) { 
     // q is now 1 
     // so it stays lower than div_items (3) forever, the loop continues 
    } 
} 

你想检查q值,未设定

if (q == 1) {