改進JQuery數據

你會如何改善這個，所以我不必再重複？我將需要創建50個選項。改進JQuery數據

var timer = 300; 

function showLabels() { 
    $('#machine ul#labels li span').animate({'top': '0px'},'slow'); 
} 
function option1() { 
    setTimeout(function() { $('#prize-details #prize-text h1').html("Header"); }, timer); 
    setTimeout(function() { $('#prize-details #prize-text p').html("Text here"); }, timer); 
    $('#machine ul#labels li#what').html('<span>1</span>'); 
    $('#machine ul#labels li#where').html('<span>2</span>'); 
    $('#machine ul#labels li#with').html('<span>3</span>'); 
    $('#machine ul#labels li#in').html('<span>4</span>'); 
    showLabels(); 
} 
function option2() { 
     setTimeout(function() { $('#prize-details #prize-text h1').html("Different header here."); }, timer); 
     setTimeout(function() { $('#prize-details #prize-text p').html("Different text here"); }, timer); 
     $('#machine ul#labels li#what').html('<span>5</span>'); 
     $('#machine ul#labels li#where').html('<span>6</span>'); 
     $('#machine ul#labels li#with').html('<span>7</span>'); 
     $('#machine ul#labels li#in').html('<span>8</span>'); 
     showLabels(); 
    }

來源

2012-05-31 user1381806

看起來你們兩個的功能是相似的 – thecodeparadox

是的，只有不同將是不同的文字在每50個功能。 – user1381806

什麼是超時？ –

由於您的兩個功能是相似的，所以你可以用一個函數嘗試像

var timer = 300; 

function showLabels() { 
    $('#machine ul#labels li span').animate({'top': '0px'},'slow'); 
} 

function option(header, para, span1, span2, span3, span4) { 
    setTimeout(function() { 
     $('#prize-details #prize-text h1').html(header); 
     $('#prize-details #prize-text p').html(para); 
    }, timer); 

    $('#what').html('<span>'+ span1 +'</span>'); 
    $('#where').html('<span>'+ span2 +'</span>'); 
    $('#with').html('<span>'+ span3 +'</span>'); 
    $('#in').html('<span>'+ span4 +'</span>'); 

    showLabels(); 
}

據編輯

如果每次迭代有那麼不同的文字調用不同磷上述功能參數如：

option('Header', 'Text here', 1, 2, 3, 4); 
option('Different Header', 'Different Text here', 5, 6, 7, 8);

等等。

來源

2012-05-31 14:28:47 thecodeparadox

對不起，發佈更新。每個選項都會附加不同的文字。 – user1381806

@ user1381806檢查更新 – thecodeparadox

非常感謝。 – user1381806

是功能option1和option2是一回事嗎？我不能告訴2.

之間的區別，你可以讓它少了幾分可讀，但較短：

var timer = 300; 

function showLabels() { 
    $('#machine ul#labels li span').animate({'top': '0px'},'slow'); 
} 
function option1() { 
    setTimeout(function() { 
     $('#prize-details #prize-text h1').html("Header"); 
     $('#prize-details #prize-text p').html("Text here"); 
    }, timer); 
    $('#machine ul#labels') 
     .find('li#what').html('<span>1</span>').end() 
     .find('li#where').html('<span>2</span>').end() 
     .find('li#with').html('<span>3</span>').end() 
     .find('li#in').html('<span>4</span>'); 
    showLabels(); 
}

來源

2012-05-31 14:27:06 mkoryak

他們將有不同的文字。 – user1381806

時只有文字是不同的，不是使用

function option(text){ 
.... 
setTimeout(function() { $('#prize-details #prize-text p').html(text); } 
}

這不是很多，但我認爲這將是優化代碼：

var temp="#machine ul#labels li" 
$(temp+"#what")... 
$(temp+"#whre")

等等...

來源

2012-05-31 14:31:57

每個選項都會附加不同的文字。發佈更新。 – user1381806

而不是將文本和標題作爲參數 –

發揮它的作用。你可以使用一個對象來攜帶你的數據。

function option(data) { 
    var prizeText = $("#prize-details #prize-text"); 
    var machineLabels = $("#machine ul#labels"); 
    setTimeout(function() { $('h1',prizeText).html("Header"); }, timer); 
    setTimeout(function() { $('p',prizeText).html("Text here"); }, timer); 
    for(var n in data) 
    { 
     $(n).html('<span>' + data[n] + '</span>'); 
    } 
    showLabels(); 
} 

option({ 
    '#what' : '1' 
    '#where' : '2' 
    '#in' : '3' 
});

來源

2012-05-31 14:37:57

for(var i=0;i<50;i++){ 
    new Function(){ 
     "function option" + i + "() { 
     setTimeout(function() { 
      $('#prize-details #prize-text h1').html('"+ myHeaders[i] +"'); 
     }, timer); 
     setTimeout(function() { 
      $('#prize-details #prize-text p').html('"+myText[i]+"'); 
     }, timer); 
     $('#machine ul#labels li#what').html('<span>1</span>'); 
     $('#machine ul#labels li#where').html('<span>2</span>'); 
     $('#machine ul#labels li#with').html('<span>3</span>'); 
     $('#machine ul#labels li#in').html('<span>4</span>'); 
     showLabels(); 
     };option"+i+"();"; 
    } 
}

可能。這是骯髒的，但仍然是一個解決方案:)

來源

2012-05-31 14:45:09

改進JQuery數據

回答

相關問題