用不同的选择器发现克隆元素，避免代码重复

Question

能否请你帮助我，如何简化这段代码？我认为，这太长时间和困惑。

var launchPad = $(".launchPad").clone(); 
var launchPad_plankovy = $(".launchPad-plankovy").clone(); 
var launchPad_plankovy_tvarovany = $(".launchPad-plankovy-tvarovany").clone(); 
var launchPad_tyckovy = $(".launchPad-tyckovy").clone(); 
var launchPad_kombinovany = $(".launchPad-kombinovany").clone(); 
var launchPad_barvy_plankovy = $(".launchPad-barvy-plankovy").clone(); 
var launchPad_barvy_tyckovy = $(".launchPad-barvy-tyckovy").clone(); 
var launchPad_zakonceni_plotovek = $(".launchPad-zakonceni-plotovek").clone(); 
var launchPad_zakonceni_tycek = $(".launchPad-zakonceni-tycek").clone(); 

$("[name='reset']").click(function(){ 
    $(".launchPad").html(launchPad.html()); 
    $(".launchPad-plankovy").html(launchPad_plankovy.html()); 
    $(".launchPad-plankovy-tvarovany").html(launchPad_plankovy_tvarovany.html()); 
    $(".launchPad-tyckovy").html(launchPad_tyckovy.html()); 
    $(".launchPad-kombinovany").html(launchPad_kombinovany.html()); 
    $(".launchPad-barvy-plankovy").html(launchPad_barvy_plankovy.html()); 
    $(".launchPad-barvy-tyckovy").html(launchPad_barvy_tyckovy.html()); 
    $(".launchPad-zakonceni-plotovek").html(launchPad_zakonceni_plotovek.html()); 
    $(".launchPad-zakonceni-tycek").html(launchPad_zakonceni_tycek.html()); 
}); 

Answer 1

您可以制作one big selector并一次收集所有元素。您可以在一个电话中对其全部应用clone。为了恢复，您可以重复使用相同的选择器，循环播放结果并从收集的克隆中替换HTML。

var $restorable = $(".launchPad, .launchPad-plankovy, " + 
    " .launchPad-plankovy-tvarovany, .launchPad-tyckovy, .launchPad-kombinovany, " + 
    " .launchPad-barvy-plankovy, .launchPad-barvy-tyckovy, " + 
    " .launchPad-zakonceni-plotovek, .launchPad-zakonceni-tycek"); 

var $launchPad = $restorable.clone(); 

$("[name='reset']").click(function(){ 
    $restorable.each(function (i) { 
     $(this).html($launchPad.eq(i).html()); 
    }); 
}); 

我似乎注意到你给每个元素都有独特的类。为此，最好使用id属性，并使用类标记具有相同类的相同类型的元素。如果你要为所有这些元素使用一个类，如'restorable'，那么列表不必太长。另外，由于您只使用克隆的HTML，因此如果您不实际克隆，但只保存HTML，则会获得更好的性能和内存使用率。连同想法，让该类restorable到所有这些因素，代码变为：

var $restorable = $(".restorable"); 

var launchPadHtml = $restorable.map(function() { return $(this).html(); }).get(); 

$("[name='reset']").click(function(){ 
    $restorable.each(function (i) { 
     $(this).html(launchPadHtml[i]); 
    }); 
}); 

Answer 2

var keys = ['launchPad-plankovy-tvarovany', 'launchPad-plankovy' ...]; 
var clones = {}; 
keys.forEach(function(key){ 
    clones[key] = $('.' + key).clone(); 
} 

$("[name='reset']").click(function(){ 
    keys.forEach(function(key){ 
    $('.' + key).html(clones[key]; 
    } 
}); 

在lodash，它的举动优雅：

var keys = ['launchPad-plankovy-tvarovany', 'launchPad-plankovy' ...]; 
var clones = _.zipObject(keys, _.map(keys, function(key){ 
    return $('.' + key).clone(); 
});