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

您必须使用$('.el').live('change', fn)，而不是$('.el').change(fn)因为您在 DOM 加载后添加了一个元素。

看到这个jsfiddle：http: //jsfiddle.net/FUyA3/1/

于 2012-11-06T23:21:46.147 回答
0

cloneNode() 仅复制相关元素的数据。它不会复制事件侦听器。您需要手动执行此操作..

使用 jQuery clone()方法..

function cloning() {

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

    }

检查小提琴

PS：你的代码看起来也很乱。可以缩小。。

更新 我对代码做了一些更改。

1.) 从 HTML 中删除 click 事件并将其添加到脚本中。

2.) 删除ID并替换为 className，因为文档中的 ID 应该
是Unique。

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