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的CLASS，而不是add的ID。不管怎样，你永远不应该有多个具有相同ID的元素。另外，我在按钮上添加了几个数据项。这些数据项告诉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

我会尝试这样的事情＆gt; http://jsfiddle.net/AYUmk/4/

我会按类而不是ID来访问项目

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

你只需要外包责任= [];然后它完美无缺......

但我不会为你做整个工作：）

避免重复jquery函数的代码

3 个答案: