jquery切换元素进行编辑

jquery toggling elements for editing

本文关键字：编辑 元素 jquery      更新时间：2023-09-26

嗨，我试图在jquery中创建一个编辑脚本，将p内容更改为输入字段，并让人们编辑它们，然后恢复到内容。

我的代码：

<div class="addressblock">
<div class="data">
<p name="bedrijfsnaam">company name</p>
<p name="tav">to whom</p>
<p name="adres">street and number</p>
<p name="postcode">1234AB</p> 
<p name="woonplaats">city</p>
<p name="land2" >Land</p>
</div>
<a href="#_" class="editinv" id="00001" name="edit">Edit</a>
</div>

Jquery = 

$(document).ready(function () { 
$(".editinv").click(function() {
    var editid = $(this).attr("id");
    var edit_or_text = $(this).attr("name");
    if(edit_or_text == "edit"){

    $(this).closest('div').find('p').each(function(){
    var el_naam = $(this).attr("name");
    var el_content = $(this).text();
    $(this).replaceWith( "<input type='text' name='"+el_naam+"' id='" + el_id + "' value='"+el_content+"' />" );

});
$(".editinv").replaceWith( "<a href='#_' class='editinv' name='done' id='"+editid+"'>Done</a>" );
}
if(edit_or_text == "done"){
    $(this).closest('div').find('input').each(function(){
    var el_naam = $(this).attr("name");
    var el_content = $(this).attr("value");
    $(this).replaceWith( "<p name='"+el_naam+"' id='" + el_id + "'>'"+el_content+"' </p>" );

});
$(".editinv").replaceWith( "<a href='#_' class='editinv' name='edit' id='"+editid+"'>Bewerken</a>" );
}
});
});

单击编辑时，它会完美地更改为输入字段，并将编辑按钮更改为完成按钮。但是，单击完成按钮永远不会注册，而类是相同的。

有人有什么想法吗？

提前感谢！

编辑：我创建了一个问题 http://jsfiddle.net/hBJ5a/的JSfiddle

它很简单，为什么元素不接受第二次单击并在已经更改后恢复？

请注意，如果您将所有<p>标签的名称更改为相同的名称，并尝试将它们还原，javascript 将无法知道哪个值应该放在哪里。

您应该向<p>标记添加一个额外的参数，以指示类型。

例如

<p data-type="text" name="bedrijfsnaam">compname</p>

更改后将变为：

<input type="text" name="bedrijfsnaam" data-type="edit" value="compname" />

当您单击按钮更改回来时，您应该简单地使用当前使用的相同功能将<p>更改为<input>，但随后颠倒顺序。

例如

function inputToParagraph() {
    var inputs = $('input[data-type="edit"]');
    inputs.each(function() {
        $(this).replaceWith('<p data-type="text" name="'+$(this).attr('name')+'">'+$(this).attr('value')+'</p>');
    });
}

当然，您应该将其他操作链接到您的提交，ajax 请求可能也更新数据库。

注意没有经过测试，但要知道上面的功能，如果指定了所有 attr 将起作用。它将直接用具有给定属性的 P 标签替换输入。

您必须确保将<p>转换为<input>时，必须确保输入也获得正确的属性。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        var clickHandler = function() {
            var editid = $(this).attr("id");
            var edit_or_text = $(this).attr("name");
            if (edit_or_text == "edit") {
                $(this).closest('div').find('p').each(function() {
                    var el_id = $(this).attr("id");
                    var el_naam = el_id; //$(this).attr("name");
                    var el_content = $(this).text();
                    $(this).replaceWith("<input type='text' name='" + el_naam + "' id='" + el_id + "' value='" + el_content + "' />");
                });
                $(".editinv").replaceWith("<a href='#_' class='editinv' name='done' id='" + editid + "'>Done</a>");
            }
            else /* if (edit_or_text == "done") */ {
                $(this).closest('div').find('input').each(function() {
                    var el_id = $(this).attr("id");
                    //var el_naam = el_$(this).attr("name");
                    var el_content = document.getElementById(el_id).value;
                    // Attribute "name" not allowed on element "p" at this point
                    //$(this).replaceWith("<p name='" + el_naam + "' id='" + el_id + "'>'" + el_content + "' </p>");
                    $(this).replaceWith("<p id='" + el_id + "'>" + el_content + "</p>");
                });
                $(".editinv").replaceWith("<a href='#_' class='editinv' name='edit' id='" + editid + "'>Bewerken</a>");
            }
            document.getElementById("00001").onclick = clickHandler;
        }
        $(document).ready(function() {
            document.getElementById("00001").onclick = clickHandler;
        });
    </script>
    <style type="text/css">
    </style>
</head>
<body>
    <div class="addressblock">
        <div class="data">
            <!-- Attribute "name" not allowed on element "p" at this point -->
            <p id="bedrijfsnaam">company name</p>
            <p id="tav">to whom</p>
            <p id="adres">street and number</p>
            <p id="postcode">1234AB</p> 
            <p id="woonplaats">city</p>
            <p id="land2">Land</p>
        </div>
        <a href="#_" class="editinv" id="00001" name="edit">Edit</a>
    </div>
</body>
</html>

与火狐 24.0/Linux 一起测试

试用 jquery 可编辑插件

演示：http://www.appelsiini.net/projects/jeditable/default.html

相关文章：