избежать дублирования кода для функции JQuery

Question

У меня есть этот скрипт (один из моих первых), который я имел немного помочь развивающимся: http://jsfiddle.net/spadez/AYUmk/2/

var addButton =$("#add"), 
    newResp = $("#resp_input"), 
    respTextArea = $("#responsibilities"), 
    respList = $("#resp"); 

// 
function Responsibility(text){ 
    this.text=text; 
} 
var responsibilities = []; 

function render(){ 
    respList.html(""); 
    $.each(responsibilities,function(i,responsibility){ 
     var el = renderResponsibility(responsibilities[i],function(){ 
      responsibilities.splice(i,1);//remove the element 
      render();//re-render 
     }); 
     respList.append(el); 
    }); 
    respTextArea.text(responsibilities.map(function(elem){ 
     return elem.text;//get the text. 
    }).join("\n")); 
} 

addButton.click(function(e){ 
    var resp = new Responsibility(newResp.val()); 
    responsibilities.push(resp); 
    render(); 
    newResp.val(""); 
}); 

function renderResponsibility(rep,deleteClick){ 
    var el = $("<li>"); 
    var rem = $("<a>Remove</a>").click(deleteClick); 
    var cont = $("<span>").text(rep.text+" "); 
    return el.append(cont).append(rem); 
} 

Использование приставке можно добавить обязанности в текст введите их в поле ввода и нажмите «Добавить». Это отлично работает для моего первого ящика, но мне нужно, чтобы это работало для трех разных ящиков, и теперь я немного зациклился на том, как применить эту функцию ко всем трем примерам «ответственность, тест, тест2», не просто дублируя код три времени и изменения переменных.

Я уверен, что этот тип вещей должен появиться много, но я не уверен, что его можно избежать. Надеюсь, кто-то, у кого больше опыта работы с javascript, может пролить свет на это.

Answer 1

Вы можете, например. использовать область видимости JavaScript для этого:

function Responsibility(text){ 
    /* .... */ 
} 

function setUp(addButton, newResp, respTextArea, respList) { 


    var responsibilities = []; 

    function render(){ 
     /* ..... */ 
    } 

    addButton.click(function(e){ 
     /* ..... */ 
    }); 

    function renderResponsibility(rep,deleteClick){ 
     /* ..... */ 
    } 
} 

А затем для каждой группы можно назвать:

setUp($("#add"), $("#resp_input"), $("#responsibilities"), $("#resp")); 

Вам нужно обязательно иметь либо иной id для каждого из этих полей, как #add1, #add2 .. или вы также можете сгруппировать каждое из них, например div с классом, как .group1 и использовать class вместо id как .add, .resp_input то даже может уменьшить количество параметров, которые необходимо пройти для установки на один параметр Я (только проходящий контейнер)

Answer 2

Я изменил код делать то, что вы хотите.

Демо http://jsfiddle.net/AYUmk/5/

---

Хитрость заключается в том, чтобы сделать ваш responsibilities массив многомерный массив, который содержит массив для каждого элемента (в данном случае, 3 шт).

var responsibilities = [new Array(),new Array(),new Array()]; 

Затем я обновил кнопки Добавить, чтобы иметь класс add вместо идентификатора add. В любом случае вы никогда не должны иметь более одного элемента с одинаковым идентификатором. Кроме того, я добавил несколько элементов данных к кнопкам. Эти элементы данных указывают jQuery, какой элемент массива использовать, какое текстовое поле нужно искать, какой список добавить и какое текстовое поле добавить.

<input type="button" value="Add" class="add" data-destination='responsibilities' data-source='resp_input' data-list='resp' data-index="0"> 
... 
<input type="button" value="Add" class="add" data-destination='test' data-source='tst_input' data-list='tst' data-index="1"> 
... 
<input type="button" value="Add" class="add" data-destination='test2' data-source='tst2_input' data-list='tst2' data-index="2"> 

Тогда это был просто вопрос изменения ваших click() и render() функции для обработки данных и многомерный массив

function render(list, textarea, index){ 
    list.html(""); 
    $.each(responsibilities[index],function(i,responsibility){ 
     var el = renderResponsibility(responsibilities[index][i],function(){ 
      responsibilities[index].splice(i,1);//remove the element 
      render();//re-render 
     }); 
     list.append(el); 
    }); 
    textarea.text(responsibilities[index].map(function(elem){ 
     return elem.text;//get the text. 
    }).join("\n")); 
} 

$('.add').click(function(e){ 
    var source = $('#' + $(this).data('source')).val(); 
    var index = parseInt($(this).data('index')); 
    var list = $('#' + $(this).data('list')); 
    var dest = $('#' + $(this).data('destination')); 
    var resp = new Responsibility(source);  
    responsibilities[index].push(resp); 
    render(list, dest, index); 
    newResp.val(""); 
}); 

ПРИМЕЧАНИЕ: Я не получил работу удаления, дайте мне знать, если вы Мне нужна помощь с этим, и я помогу, когда я доберусь до своего офиса.

Answer 3

Я бы попробовал что-то вроде этого

я бы доступ к элементам по классам, а не идентификаторы

$(".class").find("..."); 

вам просто нужно outscource обязанности = []; а затем он отлично работает ...

, но я не буду делать все Worke для вас :)