Question

我有一些带有标签标签的radioButton，后跟一个标签。当我点击一个标签时，我需要通过jquery将相应的标签更改为文本字段，以便我可以编辑其文本吗？

<label for="1_2">Man</label>
<input value="2" disabled="disabled" type="radio" name="1_1" id="1_1" />
<a id="buttonid" name="buttonid" href="#">edit</a><br />
<label for="1_2">Man</label>
<input value="2" disabled="disabled" type="radio" name="1_1" id="1_1" />
<a id="buttonid" name="buttonid" href="#">edit</a><br />
....

改为

<input value="Man" name="1_2" id="1_2">Man</label>
<input value="2" disabled="disabled" type="radio" name="1_1" id="1_1" />
<a id="buttonid" name="buttonid" hidden="true" href="#">edit</a>
....

Answer 1

希望这会有所帮助..

<强>脚本

<script>
$(document).ready(function(){
    $('#buttonid').click(function(){
        $('label').each(function(){
            var text_classname = $(this).attr('for');
            var value = $(this).text();
            var new_html = ('<input value="' + value + '" name="' + text_classname + '" id="' + text_classname + '">' + value + '</label>' )
            $(this).replaceWith(new_html);
        });
$(this).attr('hidden','true');
    })

})

</script>

Answer 2

Live Demo

$(document).ready(function() {
  $("a").click(function() {
    var tar_id = $(this).attr("data-label");
    var tar = $("label[for='"+tar_id+"']");
    var val = tar.text();
    tar.replaceWith("<input type='text' name='"+tar_id+"' id='"+tar_id+"' value='"+val+"' />");
  });
});

<强> HTML

<a id="buttonid" name="buttonid" data-label="1_2" href="#">edit</a>

再添加一个属性data-label="1_2"

相似代码 9lessons

Answer 3

你可以改变元素，没问题。

但更合理的方法是将输入字段准备好（但最初隐藏），这样当点击发生时，标签元素将被隐藏，输入替换将显示出来。通过这种方式，您可以获得更好的代码，格式化将更加容易和一致，您也可以减少提交后的工作量。

顺便说一下。 <input value="Man" name="1_2" id="1_2">Man</label>毫无意义，无效。

如何通过单击链接将标签标签更改为输入文本？

3 个答案: