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

您将函数绑定到文档上的任何单击，指定元素以及单击每个元素后要执行的操作，如下所示： ...编辑：这是一个使用replaceWith（）的解决方案 - 使用输入和标签元素并隐藏/显示它们也可以工作，这将改变＆＃34;元素本身：

<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 2

您可以使用以下逻辑使您的代码更加用户友好地使用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>

Jquery为标签和输入文本添加/删除类

2 个答案: