我对编辑功能有特殊的想法

问题描述

下面的所有函数都在$(document).ready(function())下！

All the Functions below are under a $(document).ready(function()) !

首先，我有一个输入，您可以淡入/淡出它的外观:

First I have an input which you can fade in/out its looks like this:

<form>
        <label for="vorname"> Vorname: </label> <input type="text" id="vorname"/></br>
        <label for="nachname"> Nachname: </label> <input type="text"  id="nachname"/></br>
        <label for="alter">Alter:</label> <input type="number" Id="alter"/></br>

        <label for="gender">Geschlecht:</label>
            <select id="geschlecht">
                <option id="Male">männlich</option>
                <option id="Female">weiblich</option>
            </select>
        <input type="button" value="Zurückklappen" id="back"> //fadeOut
        <input type="button" value="Absenden" class="send"/> //eventhandler
    </form>

然后我有一个单击处理程序以进行列表输入

Then I have a click handler to make list entries

$('.send').click(function onClick(){

    var age = $('#alter').val();
    var preName = $('#vorname').val();
    var secName = $('#nachname').val();
    var gender = $('#geschlecht').val();

    list.push ({
        alter: age,
        vorname: preName,
        nachname: secName,
        geschlecht: gender,
    });

    generateList();
    stat();
    save();
});

但是我想要一个具有选定列表项的Edit函数，

But I want an Edit function who takes the selected list entry,

$("#liste").click(function selectList (event) {
        var target = $( event.target );
        if ( target.is( "li" ) ) {
            target.toggleClass('selected');
        }
    });

要精确地选择一个(因为我不能一次编辑两个，或者我可以吗?也很酷)，请选择条目"进行编辑.

To take exactly this ONE (because i cant edit two at once, or can I? Would also be cool) selected Entry to edit it.

这是我需要帮助的地方(以前的事情只是解释，那里的完成的工作).

THIS is where i need help (the things before are only explanation, finished work there).

        $(".edit").click(function (){

                var index = $('.selected')
    //this where the magic i think should
// happen somehow i must get an Index form the selcted list entry

                function edit(index) {

        // here fadeIN the form which is shown above.
                        $( "#block" ).fadeIn(500);
        $( "#block" ).animate({width: '54.4%', opacity: '0.8',fontSize: '1.5em'}, 750);
        $( "#block" ).animate({height: '40%', opacity: '0.8', fontSize: '3em'}, 750);



//this is my Idea:


//I want to call the already exsiting click function with an Index
//inside the edit function.
//so the function conitnues like this:

                        $('.send').click(function onClick(index){


                        var age = $('#alter').val(index);
                        var preName = $('#vorname').val(index);
                        var secName = $('#nachname').val(index);
                        var gender = $('#geschlecht').val(index);

                        liste[index].push = {
                            vorname: preName,
                            nachname: secName,
                            alter: age,
                            geschlecht: gender
                        };


                        generateList();
                        save();
                    });
                }

            });

如果需要，我可以发布整个程序.可能是(或{在这么多的代码中丢失了，但是我保证您在我的程序中是正确的.

I can post the whole Program if requested. it could be that ( or { are missing in this much of a code, but i asusuure you in my Program is everything right.

推荐答案

如下所示:

$("#liste").click(function selectList (event) {
    var target = $( event.target );
    if ( target.is( "li" ) && !$("li").hasClass('selected')) {
        target.addClass('selected');
    }
    else if (target.is( "li" ) && $("li").hasClass('selected')) {
        target.removeClass('selected');
    }
});

$('.deleteSel').click(function delSelectedEntries () {
    alert("Ausgewählte Beiträge wuden gelöscht");
    var sel = $('.selected'); //stores the entrys
    sel.remove(); // removes only the list entrys temporaly
});

$(".edit").click(function editSelectedEntries(){
    var index = $('.selected').attr("index");
    edit(index);
});

编辑功能:

function edit (index){

    $( "#block" ).fadeIn(500);
    $( "#block" ).animate({width: '54.4%', opacity: '0.8',fontSize: '1.5em'}, 750);
    $( "#block" ).animate({height: '40%', opacity: '0.8', fontSize: '3em'}, 750);

    $('#alter').val(list[index].alter);
    $('#vorname').val(list[index].vorname);
    $('#nachname').val(list[index].nachname);
    $('#geschlecht').val(list[index].geschlecht);

    $('.send').click(function onClick(){

        var age = $('#alter').val();
        var preName = $('#vorname').val();
        var secName = $('#nachname').val();
        var gender = $('#geschlecht').val();

        list[index] = {
            vorname: preName,
            nachname: secName,
            alter: age,
            geschlecht: gender
        };

        generateList();
    });

这篇关于我对编辑功能有特殊的想法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！