Jquery Добавить/Удалить класс для этикеток и ввода текста

Question

Использование Jquery им пытаются разместить ввода текста через ярлык, когда я нажимаю на кнопку редактирования, и когда я нажимаю на кнопку отмены внутримышечно изменения его от входа маркировать

MyCode

<label id="labelId" class="labelclass">label</label> 
<input value="input" type="text" class="inputclass" id="inputId" style="display:none;"/> 
<button id="edit">edit</button> 
<button id="cancel">cancel</button> 

<script type="text/javascript"> 
    $(document).click(function(){ 
     $('#edit').addClass('inputclass').removeClass('labelclass'); 
     $('#cancel').addClass('labelclass').removeClass('inputclass'); 
    }); 
</script> 

Любая помощь оценена Спасибо!

Answer 1

Вы должны связать click событие на кнопки вместо документа. Затем, когда ваш ввод, метки и кнопки находятся на одном уровне, вы можете использовать .siblings(classname) и просто скрыть/показать их.

Попробуйте это:

$(document).ready(function() { 
 
    $('#edit').click(function() { 
 
    $(this).siblings('.labelclass').hide(); 
 
    $(this).siblings('.inputclass').show(); 
 
    }); 
 
    $('#cancel').click(function() { 
 
    $(this).siblings('.labelclass').show(); 
 
    $(this).siblings('.inputclass').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="labelId" class="labelclass">label</label> 
 
<input value="input" type="text" class="inputclass" id="inputId" style="display:none;" /> 
 
<br/> 
 
<button id="edit">edit</button> 
 
<button id="cancel">cancel</button>

Answer 2

Вы сшиваться функцию клике на документе, укажите элемент и что вы хотите чтобы это произошло после нажатия каждого из них, например, так: ... Edit: Вот решение с ReplaceWith() - с помощью входной и элемент этикетки и скрытие/показ их будет работать так же, это будет «изменение» сам элемент:

<label id="theField" class="labelclass">label</label> 
<button id="edit">edit</button> 
<button id="cancel">cancel</button> 

$(document).ready(function(){ 
    $('#edit').click(function(){ 
     $('#theField').replaceWith('<label id="theField" class="labelclass">label</label>'); 
    }); 
    $('#cancel').click(function(){ 
     $('#theField').replaceWith('<input value="input" type="text" class="inputclass" id="theField" "/>'); 
    }); 

}); 

Answer 3

Вы можете использовать следующую логику, чтобы сделать код более удобным для пользователей Товарищеский IMHO:

$(document).ready(function() { 
 
    $('#edit, #cancel').click(function() { 
 
    $('#edit, #cancel').prop('disabled', function(){return !this.disabled}); 
 
    $(this).siblings('.labelclass, .inputclass').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="labelId" class="labelclass">label</label> 
 
<input value="input" type="text" class="inputclass" id="inputId" style="display:none;" /> 
 
<br/> 
 
<button id="edit">edit</button> 
 
<button id="cancel" disabled>cancel</button>