Javascript jquery切换用于编辑的元素_Javascript_Jquery_Html

Javascript jquery切换用于编辑的元素

javascript jquery html

Javascript jquery切换用于编辑的元素,javascript,jquery,html,Javascript,Jquery,Html,嗨，我正试图在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<

嗨，我正试图在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>


公司名称
给谁
街道和编号
1234AB
城市
土地

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>" );

}

});
});

$（文档）.ready（函数（）{
$（“.editinv”）。单击（函数（）{
var editid=$（this.attr（“id”）；
var edit_或_text=$（this.attr（“name”）；
如果（编辑或文本==“编辑”）{
$（this）.closest（'div'）.find（'p'）.each（function（）{
var el_naam=$（this.attr（“名称”）；
var el_content=$（this）.text（）；
$（此）。替换为（“”）；
});
$（“.editinv”）。替换为（“”）；
}
如果（编辑或文本==“完成”）{
$（this）.closest（'div'）.find（'input'）.each（function（）{
var el_naam=$（this.attr（“名称”）；
var el_content=$（此）.attr（“值”）；
$（this）.replace为（“”“+el_content+””）；
});
$（“.editinv”）。替换为（“”）；
}
});
});

单击“编辑”时，它将完全更改为输入字段，并将“编辑”按钮更改为“完成”按钮。但是，当类相同时，单击“完成”按钮不会被注册

有人有什么想法吗

提前谢谢

编辑：我创建了一个JSFIDLE的问题

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

请注意，如果您将所有

标记的名称更改为相同的名称，并尝试恢复它们，javascript将无法知道哪个值应该放在哪里

您应该在

标记中添加一个额外的参数来指示类型

e、 g

compname

更改后将变成：

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

当您单击按钮更改回时，只需使用当前用于将

更改为

的相同功能，然后颠倒顺序即可

e、 g

函数inputOparragraph（）{
变量输入=$（'input[data type=“edit”]）；
输入。每个（函数（）{
$（this）.replaceWith（'”）+$（this.attr（'value'）+”）；
});
}

当然，您应该将其他操作链接到提交，这可能是一个ajax请求，用于更新数据库

注意未测试，但您知道，如果指定了所有attr，则上述函数将正常工作。它将直接用具有给定属性的P标记替换输入

当您将

转换为时，您必须确保输入也具有正确的属性。

<!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>

试验
var clickHandler=函数（）{
var editid=$（this.attr（“id”）；
var edit_或_text=$（this.attr（“name”）；
如果（编辑或文本==“编辑”）{
$（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（）；
$（此）。替换为（“”）；
});
$（“.editinv”）。替换为（“”）；
}
else/*如果（编辑或文本==“完成”）*/{
$（this）.closest（'div'）.find（'input'）.each（function（）{
var el_id=$（this.attr（“id”）；
//var el_naam=el_$（this）.attr（“名称”）；
var el_content=document.getElementById（el_id）.value；
//此时元素“p”上不允许使用属性“name”
//$（this）.replace为（“”“+el_content+””）；
$（this）.替换为（“”+el_content+“”）；
});
$（“.editinv”）。替换为（“”）；
}
document.getElementById（“00001”）.onclick=clickHandler；
}
$（文档）.ready（函数（）{
document.getElementById（“00001”）.onclick=clickHandler；
});
公司名称
给谁
街道和编号
1234AB
城市
土地

使用Firefox 24.0/Linux进行测试
试用jquery可编辑插件
演示：更改您的小提琴：好的，谢谢，但为什么您要将el_naam更改为el_id？id代表整个地址条目，名称代表各个部分。像这样，我不知道发布时哪个字段是什么？使用的“name”属性不是标准的一致性，请参阅注释“此时元素“p”上不允许使用属性“name”，它来自我的NetBeans IDE的语法检查。在“输入”标记中，“名称”属性是可接受的。例如，如果您想实现多个“addressblock”，您可以将“bedrijfsnaam”这样的id与“a”标记的id（如“bedrijfsnaam00001”）结合起来。如果我的回答对你有帮助的话，我很高兴能投赞成票。
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>');
    });
}

<!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>