Question

我遇到了一个问题，我无法将重复的代码行保存到变量中，并且不确定原因。除此之外，我试图将新表设置在当前而不是低于或高于它的位置，但是我无法操纵DOM来反映它。任何和所有的帮助将不胜感激。

(function($) {
$.fn.fizzBuzz = function() {
 var newTable = $(this).clone();
 var myTable = $(this.children().last().children());
 // var newTableValues = newTable.children().last().children()[i].firstChild.innerHTML;
 // var parseData = (parseInt(myTable[i].firstChild.innerHTML)

 for (var i = 0; i < myTable.length; i++) {

  if (parseInt(myTable[i].firstChild.innerHTML) % 15 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML  = "FizzBuzz";

  } else if (parseInt(myTable[i].firstChild.innerHTML) % 3 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML = "Fizz";

  } else if (parseInt(myTable[i].firstChild.innerHTML) % 5 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML = "Buzz";

  } else {
    newTable.children().last().children()[i].firstChild.innerHTML = "Uncool";
 }
  newTable.insertAfter('div');
}
}
})(jQuery)

$(".fizzer").fizzBuzz();

jsfiddle

Answer 1

(function($) {
    $.fn.fizzBuzz = function() {
        var newTable = $(this).clone();
        $("tr > td", newTable).each(function(i, e) {
            var i = parseInt(e.innerHTML, 10);
            var f = (i % 3 == 0 ? "Fizz" : "") + (i % 5 == 0 ? "Buzz" : "");
            e.innerHTML = f ? f : "Uncool";
        });
    return newTable;
}
})(jQuery);

var newTable = $(".fizzer").fizzBuzz();
$("#main").append(newTable);

它没有那么多DRYer （1）您的新表格是现有表格的副本。克隆现有表后，请不要管它。

（2）如果可以的话，避免所有的孩子/最后/等等东西;尽可能使用CSS选择器。

（3）如果您依赖于从JSON或HTML中读取数字，请始终通过parseInt（）运行它

（4）jQuery有很多有用的工具来迭代DOM对象，这些对象优于你可能编写的任何东西，主要是因为你不写任何东西就不会引入bug。而不是你的for（）循环，学习每个（）和map（）如何节省你的时间和挫折。了解jQuery.each（）和Array.each（）之间的区别，尤其是它们的.map（）等价物。

（5）通过使用jQuery的“each”函数和CSS选择器，我可以访问我关心的确切目标。我能够分析它并替换它的内容（这一切都发生在副本中）。

（6）由于我正在构建一个新的DOM对象，而不是在函数中操作它，我返回它，让用户决定把它放在哪里。

（7）除非我有特定的文档需要帮助未来的维护者理解代码，否则我所声明的唯一变量就是我不止一次使用的变量。

（8）newTable的两个实例是完全独立的。我的fizzBuzz函数中的一个是作用域的，不会影响外部函数，反之亦然。始终使用var。

干掉jQuery FizzBuzz练习

1 个答案:

干掉jQuery FizzBu​​zz练习

1 个答案:

干掉jQuery FizzBuzz练习