[英]I have a Special Idea about an Edit function
以下所有函數都在$(document).ready(function())下!
首先,我有一個輸入,你可以淡入/淡出它的樣子:
<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>
然后我有一個點擊處理程序來制作列表條目
$('.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();
});
但我想要一個獲取所選列表條目的編輯功能,
$("#liste").click(function selectList (event) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.toggleClass('selected');
}
});
准確地說這一個(因為我不能一次編輯兩個,或者我可以嗎?也會很酷)選擇Entry來編輯它。
這是我需要幫助的地方(以前的事情只是解釋,在那里完成工作)。
$(".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();
});
}
});
如果需要,我可以發布整個程序。 它可能是(或{在這么多代碼中缺失,但我在我的程序中告訴你一切都是正確的。
目前它看起來像這樣:
$("#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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.