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

両方の機能が似ているので、次のような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 
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 に答える
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 に答える