0

私はこのスクリプト (私の最初のスクリプトの 1 つ) を持っています 。

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

上部のボックスを使用すると、入力ボックスに責任を入力して [追加] をクリックすることで、責任をテキスト領域に追加できます。これは私の最初のボックスでは完全に機能しますが、3 つの異なるボックスで機能するにはこれが必要であり、コード 3 を単純に複製せずに、この関数を「責任、テスト、テスト 2」の 3 つのインスタンスすべてに適用する方法に少し行き詰まっています。回と変数の変更。

この種のことはたくさん出てくるに違いないと確信していますが、それを避けることができるかどうかはわかりません. うまくいけば、JavaScriptの経験が豊富な人がこれに光を当てることができます.

4

3 に答える 3

1

I modified your code to do exactly what you want.

Live Demo http://jsfiddle.net/AYUmk/5/

The trick is to make your responsibilities array a multidimensional array that holds an array for each item (in this case, 3 items).

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

Then, I updated the add buttons to have a CLASS of add instead of an ID of add. You should never have more than one element with the same ID anyway. Additionally, I added several data items to the buttons. These data items tell the jQuery which array item to use, which textbox to look for, which list to add to, and which text box to add to.

<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">

Then it was just a matter of changing your click() and render() functions to handle the data and multidimensional array

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("");
});

NOTE: I did not get the removal working, let me know if you require assistance with that as well and I will assist once I reach my office

于 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このフィールドごとに異なることを確認する必要があります。セットアップに 1 つのパラメーターを渡します (コンテナーのみを渡します)#add1#add2div.group1classid.add.resp_input

于 2013-06-19T09:32:46.287 に答える
0

I would try something like this > http://jsfiddle.net/AYUmk/4/

I would access the items by class instead of ids

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

you just need to outscource responsibilities = []; and then it works perfect...

but i wont do the whole worke for you :)

于 2013-06-19T09:41:59.057 に答える