0

あなたが期待する以上のものを手に入れることはあなたの誕生日にいいかもしれません-しかしこれはスクリプトであなたを夢中にさせます...:(

私は次のコードを持っています：

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

私が欲しいのは、通常の入力フィールドのように反応する入力フィールドですが、最初の（正しい）値の変更後、フォームは入力フィールドの3倍を示します...

誰かがアイデアを持っていますか？より大きなスクリプトの要約スクリプトなので、関数の構造が必要です。ご協力いただきありがとうございます ：）

4

2 に答える 2

1

Argghhh私はついにそれを見つけました。編集とeditFinishのたびにshowmainを使用することはできません。ワンクリックで複数の同じイベントをスタックしているからです！コードは次のようになります。

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

エラーが表示されることを願っています。そうでない場合は、詳細に説明できます。

于 2012-07-31T07:36:29.387 に答える
0

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/

于 2012-07-31T10:09:57.100 に答える