Question

获得超出预期的效果可能会在您的生日上变得更好 - 但是脚本中的这个会让你发疯... :(

我有以下代码：

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery-ui.min.js"></script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;">
    <input type="button" id="id1_edit" class="editIcon" value="change">
    <span id="id1_Label" class="fragenLabel">
    <p>
    <span style="margin-left:5px;">
    <b>something</b>
    </span>
    </p>
    </span>
    </div>
    </div>
    </form>
    </body>

    <script type="text/javascript">


    $(document).ready(function () {
    showMain();
    });
    function showMain() {

    $('.editIcon').css("cursor", "pointer").click(function () {
    edit($(this).attr("id"));
    });

    $('.editfinish').css("cursor", "pointer").click(function () {
    editFinish($(this).attr("id"));
    });
    }

    function edit(idTemp) {
    //alert(fragenidTemp);
    var IdArray = idTemp.split("_");
    var Id = IdArray[0]
    var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");

    $('input[id|="input' + Id + '"]').val(inputValue);
    $('.editIcon').hide();
    showMain();
    }


    function editFinish(Id) {
    var inhaltFrage = $('input[id|="input' + Id + '"]').val();
    $('.editIcon').show();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");

    showMain();
    }

    </script>

    </html>

我想要的是一个像普通输入字段一样反应的输入字段 - 但在第一次（正确）更改值后，表单显示输入字段的三倍...

有人有想法吗？因为它是更大脚本的浓缩脚本所以我需要函数的结构。谢谢你的帮助：）

Answer 1

Argghhh我终于找到了它。老兄，你不能在每次编辑和编辑后使用show main。因为你只是一次点击几个相同的事件！代码应该是这样的：

function edit(idTemp) {
    //alert(fragenidTemp);
    var IdArray = idTemp.split("_");
    var Id = IdArray[0]
    var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");

    $('input[id|="input' + Id + '"]').val(inputValue);
    $('.editIcon').hide();
     $('.editfinish').css("cursor", "pointer").click(function () {
    editFinish($(this).attr("id"));
    });
    }


    function editFinish(Id) {
    var inhaltFrage = $('input[id|="input' + Id + '"]').val();
    $('.editIcon').show();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");    }

希望您现在看到错误，如果没有，我可以详细解释。

Answer 2

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn_change" value="Change" />
<span id="id1_Label" class="fragenLabel">
</span>
<span id="id1_Input">
<input type="text" id="content1_edit" value="default-value" />
</span>
</div>
</form>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
    // Mostly this should be coming from database on page-load;
    updateVal();

    $("#btn_change").click(function(){
         if( $(this).val() == "Change" )
         {
             editVal();
         }
        else
        {
            updateVal();
        }
    })
});

function editVal()
{
    $("#id1_Label").hide();
    $("#id1_Input").show();
    $("#btn_change").val("Update");
}

function updateVal()
{
    $("#id1_Label").html( $("#content1_edit").val()).show();
    $("#id1_Input").hide();
    $("#btn_change").val("Change");
}

演示小提琴：http://jsfiddle.net/dharmavir/5yMZk/

jquery children附加删除编辑输入

2 个答案: