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

I have a simple index page that allows you to click a button to change the colors displayed randomly on the background circle divs. The code I've written is working fine, but its really repetitive; I wrote a function for each button, and the functions look identical except for the variables they access.

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

I'm trying to refactor this into a single function but can't figure out a way to allow the button that is click to access the correct variable to change the background colors. For example here is the function for the first button, which accesses the colorList variable that changes the colors to gray spectrum:

我正在尝试将其重构为单个函数,但无法找到一种方法来允许单击按钮访问正确的变量来更改背景颜色。例如,这里是第一个按钮的函数,它访问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]);
});

I tried to write something that would access the number in the class name and assign that to a variable that would be accessible to the main function doing something like this:

我尝试编写一些可以访问类名中的数字的东西,并将其分配给主函数可以访问的变量,执行以下操作:

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

...but I'm not sure that this is the right way to go about it, and I'd love some advice about how this type of refactoring is typically handled.

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

Here's a link to a Codepen showing how it works, and with all the html, css and remaining JS viewable. http://codepen.io/a6ftcruton/full/Beizu

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

2 个解决方案

#1

You can add a data attribute to the elements you will click on and pass the name of the collection you want there. You can also store your arrays in an object to make referencing them easier:

您可以向要单击的元素添加数据属性,并传递所需集合的名称。您还可以将数组存储在对象中,以便更容易地引用它们:

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

Your clickable elements get a single class and the data attribute:

您的可点击元素获得单个类和数据属性:

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

Then you can attach to an event listener like so:

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

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

Example here: http://jsfiddle.net/CVLma/

示例:http://jsfiddle.net/CVLma/

#2

The above scenario points out to CSS to refactor. I would suggest you to choose one of the following:

上面的场景指出CSS要重构。我建议你选择以下之一:

SASS
LESS

Both of them allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

它们都允许变量,混合,函数和许多其他技术,使您可以使CSS更易于维护,可扩展和可扩展。

#1