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

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/