Question

我正在尝试使用包含输入值的跨度替换输入，以便能够在单击按钮时将其切换回来。我认为这最容易分两个阶段完成 - 在输入前添加<span>[input value]</span>，然后隐藏输入。唯一的问题是我在第一部分遇到了麻烦。我正在尝试像

这样的事情

$('#container').find('input')
    .parent()
    .prepend('<span></span>') // this effectively creates: <span></span><input value=____>

但是，在prepend语句中$（this）似乎是未定义的，所以我不能这样做

    .prepend('<span>'+$(this).children('input').val()+'</span>')

由于有几个输入，我不能简单地将输入值放入变量中。我该怎么做？

Answer 1

更新问题：

你可以这样做（基于评论，每行编辑）：

$('input', context).each(function() {
  $("<span />", { text: this.value, "class":"view" }).insertAfter(this);
  $(this).hide();
});

You can view a more detailed demo here, with per-row edit toggling

对于原始问题：

您需要使用.replaceWith()：

$('#container').find('input').each(function() {
  $(this).replaceWith("<span>" + this.value + "</span>");
});

.each()创建一个闭包，其中this引用输入元素，因此您可以使用this.value作为示例。

要确保编码得到处理，请将其展开一点以使用.text()，如下所示：

$('#container').find('input').each(function() {
  $(this).replaceWith($("<span />").text(this.value));
});

You can try a demo here

Answer 2

在我看来，最简单的解决方案是将输入更改为只读并删除边框（并可能更改背景颜色，具体取决于您的UI），这实际上使它们显示为常规<span>标签。

function spanify() {
  $('#container input')
    .attr("readonly", "readonly")
    .css("borderWidth", "0");
}

function despanify() {
  $('#container input')
    .removeAttr("readonly")
    .css("borderWidth", "auto");
}

这可行吗？

jquery：用跨度替换输入

2 个答案: