改进JQuery数据

你如何改进这个，这样我就不必重复了？。我需要创建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();
    }

var定时器=300；
函数showLabels（）{
$（'#machine ul#labels li span'）。动画（{'top'：'0px'}，'slow'）；
}
功能选项1（）{
setTimeout（函数（）{$（'#奖品详细信息#奖品文本h1'）.html（“标题”）；}，计时器）；
setTimeout（函数（）{$（'#奖品详细信息#奖品文本p'）.html（“此处文本”）；}，计时器）；
$（“#machine ul#labels li#what'）.html（'1'）；
$（“#machine ul#labels li#where'）.html（'2'）；
$（“#machine ul#标签li#with'）.html（'3'）；
$（“#machine ul#labels li#in'）.html（'4'）；
showLabels（）；
}
功能选项2（）{
setTimeout（函数（）{$（'#奖品详细信息#奖品文本h1'）.html（“此处的标题不同”）；}，计时器）；
setTimeout（函数（）{$（'#奖品详细信息#奖品文本p'）.html（“此处的不同文本”）；}，计时器）；
$（“#machine ul#labels li#what'）.html（'5'）；
$（“#machine ul#labels li#where'）.html（'6'）；
$（“#machine ul#标签li#with'）.html（'7'）；
$（'#machine ul#labels li#in'）.html（'8'）；
showLabels（）；
}

功能

选项1

和

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

var定时器=300；
函数showLabels（）{
$（'#machine ul#labels li span'）。动画（{'top'：'0px'}，'slow'）；
}
功能选项1（）{
setTimeout（函数（）{
$（“#奖品详细信息#奖品文本h1'）.html（“标题”）；
$（#奖品详情#奖品文本p'）.html（“此处文本”）；
}，定时器）；
$（“#机器ul#标签”）
.find（'li#what'）.html（'1'）.end（）
.find（'li#where'）.html（'2'）.end（）
.find（'li#with'）.html（'3'）.end（）
.find（'li#in'）.html（'4'）；
showLabels（）；
}

功能

选项1

和

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

var定时器=300；
函数showLabels（）{
$（'#machine ul#labels li span'）。动画（{'top'：'0px'}，'slow'）；
}
功能选项1（）{
setTimeout（函数（）{
$（“#奖品详细信息#奖品文本h1'）.html（“标题”）；
$（#奖品详情#奖品文本p'）.html（“此处文本”）；
}，定时器）；
$（“#机器ul#标签”）
.find（'li#what'）.html（'1'）.end（）
.find（'li#where'）.html（'2'）.end（）
.find（'li#with'）.html（'3'）.end（）
.find（'li#in'）.html（'4'）；
showLabels（）；
}

因为您的两个函数都相似，所以您可以尝试使用一个函数，如

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

---

依此类推。

因为两个函数都相似，所以您可以尝试使用一个函数，如

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

---

等等。

当只有文本不同时，使用

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

虽然不多，但我认为这将有助于优化您的代码：

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

---

等等…

当只有文本不同时，使用

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

虽然不多，但我认为这将有助于优化您的代码：

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

---

等等…

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

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

功能选项（数据）{
var prizeText=$（“#奖金详情#奖金文本”）；
var machineLabels=$（“#machine ul#labels”）；
setTimeout（function（）{$（'h1'，prizeText）.html（“Header”）；}，timer）；
setTimeout（函数（）{$（'p'，prizeText）.html（“此处的文本”）；}，计时器）；
for（数据中的变量n）
{
$（n）.html（''+数据[n]+''）；
}
showLabels（）；
}
选择权({
“什么”：“1”
“#where”：“2”
“#in”：“3”
});

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

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

功能选项（数据）{
var prizeText=$（“#奖金详情#奖金文本”）；
var machineLabels=$（“#machine ul#labels”）；
setTimeout（function（）{$（'h1'，prizeText）.html（“Header”）；}，timer）；
setTimeout（函数（）{$（'p'，prizeText）.html（“此处的文本”）；}，计时器）；
for（数据中的变量n）
{
$（n）.html（''+数据[n]+''）；
}
showLabels（）；
}
选择权({
“什么”：“1”
“#where”：“2”
“#in”：“3”
});

用于（变量i=0；i
用于（var i=0；iIt似乎你们两个函数都相似是的，每50个函数中只有不同的文本。似乎你们两个函数都相似是的，每50个函数中只有不同的文本。它们都有不同的文本。它们都有不同的文本。抱歉，发布更新。每个选项都会附加不同的t text.抱歉，已发布更新。每个选项将附加不同的文本。每个选项将附加不同的文本。Post updated.than将文本和标题作为参数提供每个选项将附加不同的文本。Post updated.than将文本和标题作为参数提供