0

私は jquery と web プログラミングの初心者で、動的な html コントロールを作成しています。

ユーザーがコンボボックスから値を選択すると、ユーザーが選択した html コントロールを作成します。後

以前のhtmlコントロールを削除します。

これは、別の div にコピーしたいメインの div です

<div id="MainContents" style="display: none" >
        <form action="../../newCV/AsyncUpload" id="photoform" enctype="multipart/form-data" method="post">
              <p> <input type="file" id="photo" name="photo" /></p>

            <p><input type="submit" value="Save my profile" /></p>
        </form>
    </div>

これは私のjqeurty関数の一部です

case "Date":
                $('#c3').remove();
                $("<input name=\"c3\" id=\"c3\" type=\"date\"/>").appendTo("#changeablecontrol");

                break;

            case "Picture":

                $('#c3').remove();

                var html = "<div id=\"c3\" name=\"c3\"></div>";
                $(html).appendTo("#changeablecontrol");

                $('#MainContents').css('display', "inline").appendTo('#c3');

初めて、画像を選択すると、maintcontents div が div c3 に追加されます。いいです。しかし、日付 (c3 を削除する) を選択し、もう一度画像を選択すると、その時間は追加されません。Date を選択すると、フォームの MainContents div も削除されるためです。MainContents div を削除する理由がわかりません。部位が違うから。次に、コンボボックスで2回目に画像を選択すると、それは私の形ではありません。

jquery で html コードで maincontents を作成しようとしましたが、その時、いくつかの機能が動作しません。

これは私の changeablecontrols div です

  <div class="creatediv2" id="changeablecontrol">
    @Html.TextBox("c3","" ,new { onkeydown = "if (event.keyCode == 13) document.getElementById('create').click()" })
</div >

appendTo の代わりに append を使用しました

html += "<div id=\"MainContents\">"
                html += "<form id=\"photoform\"  action=\"../../NewCV/AsyncUpload\"   enctype=\"multipart/form-data\" method=\"post\">"; //method=\"post\"
                html += "<input type=\"file\" id=\"photo\" name=\"photo\" />";
                html += "<input type=\"submit\" id=\"uploadbtn\" value=\"Upload Photo\" /></form>";
                html += "</div>"
                $('#c3').append(html);

しかし、このjquery関数は機能しません

   $(function() {

            $("#photo").makeAsyncUploader({
                upload_url: "../newCV/AsyncUpload",
                flash_url: '../Scripts/swfupload.swf',
                button_image_url: '../../Content/blankButton.png',
                disableDuringUpload: 'INPUT[type="submit"]'
            });

        });

私は私の問題を説明したことを願っています..

4

2 に答える 2

1

MainContentsdivが削除される理由がわかりません。それは別の部分にあるからです。

いいえ、ちがいます。＃c3に追加しているので、＃c3を削除（削除）すると、彼のすべての子も削除されます。たぶん、appendTo（）関数の代わりにappend（）を使用する必要がありますか？

于 2012-12-31T13:13:34.407 に答える
0

bumerangが言ったよう に、私は各コ​​ントロールのdivを作成し、それらの表示値を非表示から継承に変更しました。

  <div class="creatediv2" id="changeablecontrol">

      <div id="filecontent" style="display: none" >
        <form action="/NewCV/AsyncUpload" id="photoform" enctype="multipart/form-data" method="post">
              <p> <input type="file" id="photo" name="photo" /></p>

            <p><input type="submit" value="Save my profile" /></p>
        </form>


  </div>     

<div id="textcontent" style="display: inherit">
    <input id="c3-1" name="c3" onkeydown="if (event.keyCode == 13) document.getElementById('create').click()" type="text" value="" />

</div>

<div id="longtextcontent" style="display: none">
      <textarea name="c3" id="c3-2" rows="5" cols="20"></textarea>
</div>

<div id="datecontent" style="display: none">
       <input name="c3" id="c3-3" type="date"/>
</div>


    </div >

私のjsquery関数

    <script type="text/javascript">
        $(function() {

            $("#photo").makeAsyncUploader({
                upload_url: "/newCV/AsyncUpload",
                flash_url: '/Scripts/swfupload.swf',
                button_image_url: '/Content/blankButton.png',
                disableDuringUpload: 'INPUT[type="submit"]'
            });

        });
    </script>

これはディスプレイの値を変更しています

  var val = cmb.options[cmb.selectedIndex].text;

        switch (val) {
            case "Text":
                $('#textcontent').css('display', 'inherit');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'none');

                break;
               case "Long Text":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'inherit');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'none');

                break;

            case "Date":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'inherit');
                $('#filecontent').css('display', 'none');

                break;

            case "Picture":

                $('#textcontent').css('display', 'none');
                $('#longtextcontent').css('display', 'none');
                $('#datecontent').css('display', 'none');
                $('#filecontent').css('display', 'inherit');
                break;

        default:

            break;
        }

ありがとうございました ：）

于 2012-12-31T14:16:25.660 に答える