5

私のコーディングでは、divとその属性を動的に作成するためにjavascript関数を使用しました

これがhtmlのコーディングです

<p >Poll Choice</p>

<input type=hidden name="choicecount" id="choicecount" value="1">

<input type=file name="choiceimg1" value ="Select"  onchange="readURL(this)" style="display:none;">

  <script language="JavaScript" type="text/javascript">

  function HandFileButtonClick()

  {

    document.addpoll.choiceimg1.click();

  }

  function HandleFileButtonClick(val)    
  {   
      var ss=val.name;

      document.forms["addpoll"]

      var n=ss.split("choiceimgs");

      document.forms["addpoll"]["choiceimg" + n[1]].click();
  }

  </script>

    <div>
    <div style="width:400px;height:85px;">
            <div id="imgbg" style="float:left;width: 110px;height: 80px;text-align: center;border: 1px solid #CCC;">  
                <input type="button" onclick="HandFileButtonClick();"  value="Browse" id="firstremove" style="margin-top: 30px;" class="addmultiple">
            </div>
            <div style="float:right;margin-top: 30px;">
                <input type=text name="choicename1" id="firstremove2">

                <input type="button" value="Remove" id="firstremove3" onclick="document.getElementById('imgbg').style.display='none';document.getElementById('firstremove').style.display='none';document.getElementById('viewimg1').style.display='none';document.getElementById('firstremove2').style.display='none';document.getElementById('firstremove3').style.display='none';" style="color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;">
            </div>
    </div>
<img src="#" name="viewimg1" class="addmultiple" id="viewimg1" height="70px" width="85px" style="display:none"/>

<br />
    </div>
<span id="file" ></span>

<input id="addchoice" type=button value="Add New Entry" onclick="addnew(document.forms['addpoll']['choicecount'].value);">

ユーザーが addnewentry ボタンをクリックすると、関数 addnew(count) が呼び出されます。カウントは、ユーザーが追加した選択肢の数を示します。そのaddpoll関数のコーディングは次のとおりです-javascript

<script>
    function addnew(type)
    {

    type=parseInt(type)+1;
    var name="choiceimg"+type;
    var name10="choiceimgs"+type;
    var name1="choicename"+type;
    var name2="viewimg"+type;
    var name3="remover"+type;
    var name4="br"+type;
    var mydiv = document.createElement("div");
    mydiv.setAttribute("id",imgbg);
    mydiv.setAttribute("style","width:110px;height:80px;float:left;text-align:center;border:1px solid #ccc;");
    var text = document.createElement("input");
    text.setAttribute("id", name10);
    text.setAttribute("type", "button");
    text.setAttribute("class", "addmultiple");
    text.setAttribute("style", "width: 190px");
    text.setAttribute("style", "padding-left: 5px;&nbsp;");
    text.setAttribute("value", "Browse");
    text.setAttribute("onclick", "HandleFileButtonClick(this)");
    text.setAttribute("name", name10);
    var textf = document.createElement("input");
    textf.setAttribute("type", "file");
    textf.setAttribute("class", "addmultiple");
    textf.setAttribute("style", "width: 246px");
    textf.setAttribute("style", "display:none;");
    textf.setAttribute("name", name);
    textf.setAttribute("onChange", "readURL(this)");
    var file = document.createElement("input");
    file.setAttribute("type", "text");
    file.setAttribute("name", name1);
    file.setAttribute("style", "margin-top: 60px;");
    var viewimg = document.createElement("img");
    viewimg.setAttribute("src", "#");
    viewimg.setAttribute("id", name2);
    viewimg.setAttribute("width", "85px");
    viewimg.setAttribute("height", "70px");
    viewimg.setAttribute("name", name2);
    viewimg.setAttribute("style", "display:none");
    viewimg.setAttribute("class", "addmultiple");
    var remove = document.createElement("input");
    remove.setAttribute("type", "button");
    remove.setAttribute("value", "Remove");
    remove.setAttribute("style", "color: red; font-size: 12px; border: 0px; background: none; text-decoration: underline;");
    remove.setAttribute("name", name3);
    remove.setAttribute("onclick", "remove(this)");
    var br1 = document.createElement("br");
    br1.setAttribute("id", name4);
    document.forms['addpoll']['choicecount'].value=type;
    var addfile = document.getElementById("file");
    var addtext = document.getElementById("file");
    var view = document.getElementById("file");
    var remove1 = document.getElementById("file");
    var br2 = document.getElementById("file");
    var textf1 = document.getElementById("file");
    var myimgdiv = document.getElementById("file");
    myimgdiv.appendChild(mydiv);
    addtext.appendChild(text);
    addfile.appendChild(file);
    remove1.appendChild(remove);
    view.appendChild(viewimg);
    br2.appendChild(br1);
    textf1.appendChild(textf);

    }

    </script>

ここで変えたいのは、

mydiv がファイルに追加されると、div が個別に、画像が個別に取得されます。

addnew 関数によって動的に作成された Div

上の画像では、参照ボタンのあるボックス、choicename のテキスト ボックス、および削除ボタンを含む最初のセットは、フォーム内のコーディングからのものです。以下の 3 つのセットは、addnew 関数によって動的に追加されます。ただし、ボックスには参照ボタンが含まれていません。また、最初のdivと同じスタイルが必要です。しかし、丸一日時間を費やした後、動的divを最初のdivと同じように変更することはできません。誰でもこの問題を解決するために私を助けることができます。読んでくれて、これを解決するのを手伝ってくれてありがとう

4

1 に答える 1

3

javascript関数では、いくつかの変更が必要です。

参照、

mydiv.setAttribute("id",imgbg)

imgbg何も参照しないので、代わりに新しい一意の変数を作成します

var name5="imgbg"+type
mydiv.setAttribute("id",name5)

これにより、後でボタンを追加するときにこの特定のdivを参照できるようになります。

スタイリング、次のようにすべてのスタイルをまとめます。

text.setAttribute("style", "padding-left: 5px;margin-top: 30px;");

シーケンス処理では、包含を追加した後でのみdiv、ボタンを追加できます。

var myimgdiv = document.getElementById("file");
myimgdiv.appendChild(mydiv);
var addtext = document.getElementById(name5);
addtext.appendChild(text);

簡単な例： http： //jsfiddle.net/3Sd4W/

于 2012-12-20T07:18:54.100 に答える