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();
});
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.
at the moment it looks like this:
$("#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);
});
edit Function:
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.