변수에 대한 액세스를 사용하여 유사한 기능을 리팩터링합니다.

버튼을 클릭하여 배경 서클 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]); 
    });

...하지만이 그것에 대해 갈 수있는 올바른 방법입니다 확실하지 않다, 나는에 대한 몇 가지 조언을 싶지만이 같은 일을 주요 기능에 액세스 할 것이다 변수 이러한 유형의 리팩토링이 일반적으로 어떻게 처리되는지.

어떻게 작동하는지 보여주는 모든 HTML, CSS 및 나머지 JS가 표시된 Codepen에 대한 링크입니다. http://codepen.io/a6ftcruton/full/Beizu

출처

2014-03-06 Jim

클릭 할 요소에 data 속성을 추가하고 거기에 원하는 컬렉션의 이름을 전달할 수 있습니다.

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

는 그런 다음 같은 이벤트 리스너에 첨부 할 수 있습니다

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

귀하의 클릭 가능한 요소

는 하나의 클래스 및 데이터 속성을 얻을 : 당신은 또한 쉽게 그들에게 참조 할 객체에 배열을 저장할 수 있습니다 그래서 여기

$('.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/

출처

2014-03-06 21:54:35 veddermatic

데이터 메서드를 사용하는 방법을 잘 모르겠지만 시행 착오를 거쳐 얻었습니다. 코드가 훨씬 깨끗해졌습니다. http://codepen.io/a6ftcruton/pen/coDIx 감사! – Jim

기꺼이 도와주세요! – veddermatic