Question

你会如何改善这一点，所以我不必再重复？我需要创建50个选项。

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();
    }

Answer 1

由于您的两个功能都相似，因此您可以尝试使用一个功能，如

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);

等等。

Answer 2

函数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();
}

Answer 3

当只有文字不同时，请使用

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

它并不多，但我认为这将优化您的代码：

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

依旧......

Answer 4

发挥它的作用。您可以使用对象来传输数据。

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'
});

Answer 5

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+"();";
    }
}

也许。它很脏但仍然是一个解决方案：）

改进JQuery数据

5 个答案: