Jquery为标签和输入文本添加/删除类
Jquery为标签和输入文本添加/删除类
提问于 2015-09-09 09:01:39
当我单击“编辑”按钮和单击“取消”按钮，将输入文本框从“输入”更改为“标签”时，使用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>任何帮助都是非常感谢的！
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-09-09 09:09:11
您需要在按钮上而不是文档上绑定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>
Stack Overflow用户
发布于 2015-09-09 09:04:20
您正在将您的函数绑定到文档上的任何单击，指定元素以及单击每个元素后希望发生的事情，如：...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" "/>');
});
});Stack Overflow用户
发布于 2015-09-09 09:18:00
您可以使用以下逻辑使您的代码更具有用户自由度：
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32475289
复制相关文章
相似问题
腾讯云开发者
