Question

好吧，我可能会混淆一些可能回答这个问题的人，我会按照我理解的方式设置这个。请耐心等待。

假设我以这种方式拥有一系列div：

<div id="par1"><span>Text 1</span></div>
<div id="par2"><span>Text 1</span></div>
<div id="par3"><span>Text 1</span></div>
<div id="par4"><span>Text 1</span></div>

然后，我有一个隐藏的div，其文本框就像编辑器一样：

<div id="editor" style="display: hidden"><input id="uniqueID$textbox" type="text" /></div>

我想在jQuery中实现的是直观在上面的div中显示 #editor div当我点击每个div有点编辑器时。我打算只为每个文本框使用一个文本框，而不是在这些div中单独输入框并在需要时显示它们。

我希望我能很好地解释我的问题并希望你们能帮忙

Answer 1

您可能希望在点击时将<span>替换为<input>元素，例如

$(function(){
  $('span').bind('click', function(){
     $(this).replaceWith($('<input/>', {
        id:       'newinp',
        type:     'text',
        focusout: function(){
           $(this).replaceWith('<span>' + $(this).val() + '</span>');
        }
     }));       
     $('#newinp').focus();
  });
});

工作示例：http://www.jsfiddle.net/qbDKN/

Answer 2

您无法避免重新呈现HTML，但我怀疑您只是想重新呈现整个页面。当然可以在JS中使用jquery，我相信你需要detach()和append() / prepend() / *pendTo()方法之一的组合，根据文档示例{{3} }。

Answer 3

您可以克隆ID为editor的div并将其放入点击的div中，如下所示：

var $clone = $('#editor').clone();

$('div[id^="par"]').click(function(){
  $(this).append($clone);
});

See the working example here

是否可以使用jquery在另一个div内移动div而无需重新渲染html？

3 个答案: