2

さまざまな調査を行いましたが、問題の解決策が見つかりません。背景の色を変更するためにcssでドロップダウン選択を作成しましたが、Javascriptで複製しようとすると、新しいコピーは選択の属性を変更しないため、元の色が保持されます。試してみて、コピーを追加して、色を変更してみてください。

私はここが初めてです。コードを追加することがあまりできないので、試してみてください：

http://jsfiddle.net/gabry501/FUyA3/ または github

https://github.com/gabry501/Test-Color/blob/master/test.html

頭

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script type="text/javascript">

function cloning() {

    var container = document.getElementById('fine');
    var clone = document.getElementById('contenitore').cloneNode(true);
    container.appendChild (clone);

}

スタイル

select option,
select {
    background-color:white;
    width:200px;
    height:200px;
}

select option[value="1"],
select.o1
{
    background-color:blue;
}

select option[value="2"],
select.o2
{
    background-color:red;
}

select option[value="3"],
select.o3
{
    background-color:orange;
}

体

<div style="width:1100px;
height:250px;" id="contenitore">

脚本

<script>$('select[id$=-status][id^=id_item-]').children().each(
    function (){
        if($(this).val() == 0){
            $(this).css('backgroundColor','white');
        }
        if($(this).val() == 1){
            $(this).css('backgroundColor','green');
        }
        if($(this).val() == 2){
            $(this).css('backgroundColor','red');
        }
        if($(this).val() == 3){
            $(this).css('backgroundColor','orange');
        }
    }
);</script>

<script>    
$('select[id$=-status][id^=id_item-]').change(function (){
    var color = $(this).find('option:selected').val();

    $(this).removeClass('o1 o2 o3').addClass('o' + $(this).find('option:selected').val());
}).change();

4

4 に答える 4

1

スタイルを変更するためにリスナーに依存しているようです。を使用して追加されたリスナーは、複製されaddEventListenerた要素には含まれないため、個別にアタッチする必要があります。

インラインで追加された、または使用して追加されたリスナーattachEventは複製されることに注意してください。

于 2012-11-06T23:19:44.487 に答える
0

cloneNode() 問題の要素のデータのみをコピーします。イベントリスナーをコピーしません。手動で行う必要があります..

jQuery clone()メソッドを使用します。

function cloning() {

        var container = document.getElementById('fine');
        var clone = $(document.getElementById('contenitore')).clone(true);
        $(container).append(clone);

    }

フィドルをチェック

PS: また、あなたのコードは本当に乱雑に見えます。あなたはそれを縮小することができます..

更新 コードにいくつかの変更を加えました。

1.) HTML からクリック イベントを削除し、それをスクリプトに追加しました。

2.)ドキュメント内の ID はUniqueであると想定さ れているため、 IDを削除して className に置き換えました。

3.) 余分なスタイルを削除し、単純なクラス名に置き換えました。

4.) HTML に含めるよりも、スタイルとスクリプト用に別のファイルを用意することをお勧めします。

5.) 機能させたい場合は、スタイルとスクリプトを、マークした対応するタグに移動します。

HTML

 <!doctype html>
    <html>
       <head>
         <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            // Add the Styles here
        </style>
      </head>

       <body>
          <div style="width:1100px; height:250px;" class="contenitore">
             <select  name="item-0-status">
                <option value="" disabled="disabled" class="optionGroup">SELECT 
                      COLOR</option>
                <option value="1"> BLUE</option>
                <option value="2"> RED </option>
                <option value="3"> ORANGE</option>
             </select>
          </div> <!--Contenitore -->

          <div id="fine"></div>

          <br>
          <div id="bottone">
          <input id="btn" type="button" Value="ADD">
         </div>
           <script type="text/javascript">
               // Script Comes Here
           </script>           

       </body>
    </html>

Javascript

$(function() {
    $('select[name="item-0-status"]').change(function() {
        $(this).removeClass('o1 o2 o3').addClass('o' + $(this).val());
    }).change();

    $('#btn').on('click', function() {
        var container = document.getElementById('fine');
        var clone = $(document.getElementsByClassName('contenitore')[0]).clone(true);
        $(container).append(clone);
    });
});​

スタイル

#bottone
{
   float:left;
   text-align:left;
   clear:left;
   margin-top:20px;
}

select option,select 
{
   background-color:#FFF;
   width:200px;
   height:200px;
}

.o1
{
    background-color:blue;
}

.o2
{
   background-color:red;
}

.o3 
{
   background-color:orange;
}​

更新されたフィドル

于 2012-11-06T23:23:04.110 に答える
0

ディープ クローン作成を試してください - つまり、 $(selector).clone(true) ....その後、イベントもクローンされます

于 2014-08-19T11:48:46.020 に答える
0

DOM がロードされた後に要素を追加しているため、$('.el').live('change', fn)代わりに使用する必要があります。$('.el').change(fn)

このjsfiddleを参照してください：http://jsfiddle.net/FUyA3/1/

于 2012-11-06T23:21:46.147 に答える