克隆使用不同选择器找到的元素，避免代码重复

Clone elements found with different selectors, avoiding code repetition

本文关键字：元素 代码 选择器      更新时间：2023-09-26

你能帮我如何简化这段代码吗？我想，它太长了，太混乱了。

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

您可以制作一个大选择器并同时收集所有元素。您可以在一次调用中对所有这些应用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]);
    });
});

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

在洛达什，它的移动优雅：

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