jQuery를 토글 입력/스팬 값은

Question

내가 입력에 값을 스팬 텍스트의 값을 얻을 채우는 간단한 테스트 스크립트를 만들어 작동하지 : http://jsfiddle.net/mujaji/8a923n0t/6/

$('.panel-body input').val($('.panel-body span').text()); 

$('button').click(function(){ 
    $('.panel-body span, .panel-body input').toggleClass('hidden'); 
    $('.panel-body span').text($('.panel-body input').val()); 
    $(this).children('i').toggleClass('glyphicon-floppy-disk'); 

    if ($(this).children('span').text() == "Check Out") { 
     $(this).children('span').text("Save") 
    } 
    else { 
     $(this).children('span').text("Check Out"); 
    } 
}); 

이것은 문제가되지 않습니다. 이것은 잘 작동합니다.

...하지만 일단 실제 환경에 구현하면 값을 다시 얻지 못합니다. 두 사람 사이에 너무 뚜렷한 차이가 있지만 다소 벗어난 것처럼 보입니다. 나는 어떤 오류도 발생하지 않기 때문에 문법이 어딘가에 있다고 생각한다.

"실제"버전입니다. 클릭 "체크 아웃"동작에서 볼 수 있습니다 :

http://jsfiddle.net/mujaji/uL1c8owv/

$('.patient-data.stacked li input').val($(this).next('span').text()); 

$('.nav-tools li a').click(function(){ 
var valueToggle = $(this).closest('.panel-heading').next('.panel-body').children('.tab-content').children('.tab-pane.active').find('.patient-data li'); 
valueToggle.children('span, input').toggleClass('hidden'); 
valueToggle.children('span').text(valueToggle.children('input').val()); 

if ($(this).children('span').text() == "Check Out"){ 
    $(this).children('span').text("Save"); 
    $(this).children('i').toggleClass('fa-pencil-square-o fa-floppy-o'); 
} 

else { 
    $(this).children('span').text("Check Out"); 
    $(this).children('i').toggleClass('fa-pencil-square-o fa-floppy-o'); 
} 

을});

누구든지 내가 뭘 잘못하고 있다고 말할 수 있습니까?

Answer 1

Adeneo 내 질문에 대한 답변을 제공해 드릴 수있었습니다. 문제의 일부는 $ ('. 패널 - 바디 입력') 코드의 첫 번째 부분에 대한 반환을 추가하지 않았다는 것입니다. 또한 click 이벤트에 약간의 조정을 가하여 다음과 같은 하위 항목을 전환 할 수 있습니다. .patient-data li.

다음은 수정을 보여주는 바이올린과 함께 업데이트 된 코드입니다 :

$('.patient-data.stacked li input').val(function() { 
    return $(this).next('span').text(); 
}); 

$('.nav-tools li a').click(function(){ 
var valueToggle = $(this).closest('.panel-heading').next('.panel-body').children('.tab-content').children('.tab-pane.active').find('.patient-data li'); 
    valueToggle.children('span, input').toggleClass('hidden').text(function() { 
     return $(this).siblings('input').val(); 
    }); 

    if ($(this).children('span').text() == "Check Out"){ 
     $(this).children('span').text("Save"); 
     $(this).children('i').toggleClass('fa-pencil-square-o fa-floppy-o'); 
    } 

    else { 
     $(this).children('span').text("Check Out"); 
     $(this).children('i').toggleClass('fa-pencil-square-o fa-floppy-o'); 
    } 

}); 

http://jsfiddle.net/uL1c8owv/1/