Question

我有一个简单的索引页面，允许您单击按钮以更改背景圆圈div上随机显示的颜色。我写的代码工作正常，但它真的很重复;我为每个按钮编写了一个函数，除了它们访问的变量外，函数看起来都是相同的。

我正在尝试将其重构为单个函数，但无法找到一种方法来允许单击按钮访问正确的变量来更改背景颜色。例如，这里是第一个按钮的函数，它访问colorList变量，将颜色更改为灰色光谱：

var colorList1 = [//array of 20 colors]
var colorList2 = [//array of 20 colors]
var colorList3 = [//array of 20 colors]
var colorList4 = [//array of 20 colors]

// .choice-1 is the div class for the first button
$(".choice-1").on("click", function() {
    blankSlate();
    colorList = colorList1;
    $("[id^='nav']").css("background-color", colorList[1]);
    $("#colorChoice").css("background-color", colorList[1]);
});

我试着编写一些可以访问类名中的数字的东西，并将其分配给主函数可以访问的变量：

var buttonVar = $("button").attr[0].nodeValue; // get full name of nodeValue
var btnChoice = buttonVar[buttonVar.length-1]; // access number at end of class name
$("button").on("click",function() {
    $('.choice' + btnChoice).on('click', function(){*/
    blankSlate();
    colorList = colorList + btnChoice;
    $("[id^='nav']").css("background-color", colorList[btnChoice]);
    $("#colorChoice").css("background-color", colorList[btnChoice]);
  });

...但我不确定这是否是正确的方法，我会喜欢一些关于如何处理这种类型的重构的建议。

这是一个指向Codepen的链接，显示它是如何工作的，并且所有的html，css和剩余的JS都可以查看。 http://codepen.io/a6ftcruton/full/Beizu

Answer 1

您可以为要点击的元素添加data属性，并传递您想要的集合名称。您还可以将数组存储在对象中，以便更容易地引用它们：

var myData = {
  list1: [ ... ],
  list2: [ ... ],
  list3: [ ... ]
  // more if you need them...
};

您的可点击元素会获得一个类和数据属性：

<a href="#" class="wow" data-list-name="list2">Click me</a>
<button class="wow" data-list-name="list3">No, Click me</button>

然后你可以像这样附加到一个事件监听器：

$('.wow').on('click', function () {
  var el = $(this);
  var my_list_name = el.data('list-name');
  var the_data = myData[my_list_name];
  // do stuff with your data
});

此处示例：http://jsfiddle.net/CVLma/

Answer 2

上述场景指出要CSS进行重构。我建议你选择以下之一：

SASS
LESS

它们都允许variables，mixins，functions以及许多其他技术，可让您CSS更maintainable，{{1 }和themable。

通过访问变量来重构类似的函数

2 个答案: