0

我有这个脚本（我的第一个脚本之一），我在开发过程中得到了一些帮助：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);
}

使用顶部框，您可以通过在输入框中键入职责并单击添加来将职责添加到文本区域。这适用于我的第一个盒子，但我需要它适用于三个不同的盒子，现在我有点卡住了如何将此函数应用于所有三个实例“责任、测试、test2”，而无需简单地复制代码三时间和改变变量。

我敢肯定这种事情一定会经常出现，但我不确定是否可以避免。希望有更多javascript经验的人可以对此有所了解。

4

3 回答 3

1

我修改了您的代码以完全按照您的意愿行事。

现场演示http://jsfiddle.net/AYUmk/5/

诀窍是使您的responsibilities数组成为一个多维数组，为每个项目（在本例中为 3 个项目）保存一个数组。

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

然后，我将添加按钮更新为 CLASS ，add而不是 ID add。无论如何，您永远不应拥有多个具有相同 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("");
});

注意：我没有让移除工作，如果您也需要帮助，请告诉我，一旦我到达我的办公室，我会提供帮助

于 2013-06-19T09:41:26.003 回答
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.group1classid.add.resp_input

于 2013-06-19T09:32:46.287 回答
0

我会尝试这样的> http://jsfiddle.net/AYUmk/4/

我会按类而不是 id 访问项目

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

你只需要外包责任 = []; 然后它完美地工作......

但我不会为你做所有的工作:)

于 2013-06-19T09:41:59.057 回答