Как изменить значение текста с помощью jquery

Question

У меня есть элемент Item с ссылкой на редактирование каждого из них. Если я нажму ссылку «Редактировать», откроется вход, введенный с помощью кнопки SAVE и CANCEL. Если я нажму «Отменить», он вернется к исходному виду. Все это прекрасно.

Но я хочу, чтобы при нажатии кнопки сохранения, если я что-то напишу в поле ввода, он сохранит и заменит предыдущий текст.

Как у меня есть TEXT 'Cras justo odio', если я нажму кнопку «Редактировать», откроется поле ввода, и я напишу «THIS IS COOL» и нажмите «Сохранить». Теперь текст «Cras justo odio» заменит «THIS IS COOL». Как я могу это сделать?

Заранее благодарен.

JS

$(".btn-link").click(function() { 
    $(this).parent('.view-mode').hide(); 
    $(this).parent('.view-mode').siblings('.edit-mode').show(); 
}); 
$(".cancel-edit").click(function() { 
    $(this).parent('.edit-mode').hide(); 
    $(this).parent('.edit-mode').siblings('.view-mode').show(); 
}); 

Answer 1

Вы должны добавить:

$(".confirm-edit").click(function() { 
    var inptext = $(this).siblings('input').val(); 
    $(this).parent('.edit-mode').siblings('.view-mode').children('span').text(inptext); 
    $(this).parent('.edit-mode').hide(); 
    $(this).parent('.edit-mode').siblings('.view-mode').show(); 
}); 

Fiddle: http://jsfiddle.net/has9L9Lh/38/

Answer 2

$(".btn-link").click(function() { 
    $(this).parent('.view-mode').hide(); 
    $(this).parent('.view-mode').siblings('.edit-mode').show(); 
}); 
$(".cancel-edit").click(function() { 
    $(this).parent('.edit-mode').hide(); 
    $(this).parent('.edit-mode').siblings('.view-mode').show(); 
}); 
$(".confirm-edit").click(function() { 
    $dft = $(this).parent('.edit-mode').siblings('.view-mode').find('span').text(); 
    $(this).parent('.edit-mode').find('.form-control').val($dft); 
    $val = $(this).parent('.edit-mode').find('.form-control').val(); 
    $(this).parent('.edit-mode').siblings('.view-mode').find('span').text($val); 
    $(this).parent('.edit-mode').hide(); 
    $(this).parent('.edit-mode').siblings('.view-mode').show(); 
});