Question

单击编辑按钮时，我必须显示文本框和列表框。请提出如何做这件事的建议。

HTML：

<div class="textboxes">
<ul>
    <li><input type="text" id="txt" /></li>
    <li><input type="text" id="txt" /></li>
    <li><input type="text" id="txt" /></li>
</ul>
</div>

<input type="button" value="Edit" id="editBut" />

使用Javascript：

$("input[type='text']").blur(function(){
    $(this).hide().after('<span class="dfk">' + $(this).val() + '</span>');
});

这里是小提琴：http://jsfiddle.net/thilakar/yvNuC/11/

由于

Answer 1

就是这样：http://jsfiddle.net/yvNuC/14/

$("#editBut").click(function() {
      if ($('.textboxes').is(':visible')) {
         $('.textboxes').hide();
         // do save info
         $(this).val('Edit');
     }
     else {
         $('.textboxes').show();
         $(this).val('Save');
     }        
});

或者，如果您需要在保存后显示值：http://jsfiddle.net/yvNuC/16/

Answer 2

试试这个

$("#editBut").click(function() {
 $('.textboxes span').hide();
 $('.textboxes input[type=text]').show();

}）;

选中此DEMO

单击编辑按钮时显示文本框

2 个答案: