2014-04-10 130 views
2

我有一个JavaScript函数,它看起来像这样:减少JavaScript函数长度

function myfun(){ 
//product.1 
var t1=document.getElementById('1').innerHTML; 
var link = document.getElementsByClassName(t1); 

if(document.getElementsByClassName(t1).length==1){ 
document.getElementById(t1).innerHTML=link[0].outerHTML; 
document.getElementById(t1).getElementsByTagName('a')[0].className='dsad'; 

} 
if(document.getElementsByClassName(t1).length==2){ 
document.getElementById(t1).innerHTML=link[0].outerHTML+'; '+link[1].outerHTML; 
var element = document.getElementById(t1).getElementsByTagName('a')[0].className='dsad'; 
var element2 = document.getElementById(t1).getElementsByTagName('a')[1].className='dsad'; 
}... 
//product.2 
var t2=document.getElementById('2').innerHTML; 

它是这样说,直到if(document.getElementsByClassName(t1).length==10),然后继续元素 - document.getElementById('2')依此类推,直到它到达单元号10。整个脚本大约700行,我想以某种方式减少它。我正在考虑一个for循环,但我看不出如何实现这一点。有什么建议么?

+0

什么? – Lix

+0

你有没有听说过for循环? – rikpg

+0

我通常不会链接到W3School,但他们用于“for循环”的示例正是您要查找的内容。 http://www.w3schools.com/js/js_loop_for.asp –

回答

5

尝试:

for(i = 1; i <= 10; i++){ 
    if(document.getElementsByClassName(t1).length == i){ 
    document.getElementById(t1).innerHTML=link[i-1].outerHTML; 
    document.getElementById(t1).getElementsByTagName('a')[ i-1 ].className = 'dsad'; 
    } 
} 

编辑:

如果您还想要的元素id来增加你应该尝试:

for(i = 1; i <= 10; i++){ 

var t1=document.getElementById(''+i).innerHTML; 
var link = document.getElementsByClassName(t1); 

     if(document.getElementsByClassName(t1).length == i){ 
     document.getElementById(t1).innerHTML=link[i-1].outerHTML; 
     document.getElementById(t1).getElementsByTagName('a')[ i-1 ].className = 'dsad'; 
     } 
    } 
+1

ElementID,在这种情况下,t1也应增加 – user986959

+0

@ user986959因此增加它 –

+0

您需要一个嵌套在另一个中的2个循环。一个用于ids,两个长度为 –

3

你可以试试这个:

for(var id=1;id<=10;id++){ 
    var t1id=""+id; 
    var t1=document.getElementById(t1id).innerHTML; 
    var link = document.getElementsByClassName(t1); 
    for(var num=1;num<=10;num++){ 
     if(document.getElementsByClassName(t1).length==num){ 
      document.getElementById(t1).innerHTML=link[0].outerHTML; 
      document.getElementById(t1).getElementsByTagName('a')[0].className='dsad'; 
     } 
    } 
} 
+0

你不应该需要'var t1id =“ “+ id;'line,但这是实际的(尽可能不快速地回答)回答 – Liam

+1

我知道,我只是想让代码清晰可读。 – DankMemes

3
function myfun(){ 
    for(i=1;i<=10;i++){ 
     var ti=document.getElementById(i).innerHTML; 
     var link = document.getElementsByClassName("t" + i); 

     if(link.length==1){ 
      link.innerHTML=link[0].outerHTML; 
      ti.getElementsByTagName('a')[i - 1].className='dsad'; 

     } 
     else if(link.length==2){ 
      ti.innerHTML=link[i - 1].outerHTML+'; '+link[i].outerHTML; 
      var element = ti.getElementsByTagName('a')[i - 1].className='dsad'; 
      var element2 = ti.getElementsByTagName('a')[i].className='dsad'; 
     } 
    } 
} 
+0

可以做一些模糊的解释吗? – Liam

+0

我想知道他想要做的是发现是否只有一个或一个以上的元素只有一个类名,我认为这个函数足够清晰,可以指向正确的方向 –

2

我不确定你的代码的一部分。所以我会认为这取决于id是不同的。

首先我会做的是创建内容的JavaScript对象要包括你的className

var classNameDictionary = { 0 : 'dsad', 1 :'dsad, ...}; 

一旦你有了这个,那么我会实现一个for循环如下:

function myFun(numElements){ 
    for(var i = 0; i < numElements; i++) { 
     var t = document.getElementById(''+i).innerHTML; 
     var link = document.getElementsByClassName(t); 
     document.getElementById(t).innerHTML = ""; 
     for(var j = 0; j < link.length; j++) { 
      document.getElementById(t).innerHTML +=link[j].outerHTML; 
      var element = document.getElementById(t).getElementsByTagName('a')[j].className = classNameDictionary[j]; 
     } 

    } 
} 

我希望它能帮助有关传递元素的`id`属性的功能,然后一遍又一遍地呼唤一个循环内的功能