1

您将如何改进这一点，这样我就不必继续重复了？我将需要创建 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();
    }
4

5 回答 5

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

等等。

于 2012-05-31T14:28:47.513 回答
0

是功能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-31T14:27:06.187 回答
0

当只有文本不同时，比使用

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

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

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

等等...

于 2012-05-31T14:31:57.593 回答
0

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

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-31T14:37:57.823 回答
0 
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-31T14:45:09.117 回答