Question

我有一些代码，我正试图解决问题......

所以我有这个：

//Increment Color Option Values 
clone.find('#color_option').attr('class', function(i, val) {
  return val + color_option;
});

我想清除克隆项目的内联样式，我浏览了一下，找不到任何关于混合属性+函数的内容，只找到了如何使用

更新多个属性

$(selector).attr({attribute:value, attribute:value,...})

我认为这不适用于我的情况......

与往常一样，任何建议，解释修复都将非常受欢迎！

更新：

// Front Color
            var colorcountFront = 2;
            var color_option = 2;

                $('#addcolorFront').click(function() {
                    var source = $('#clonecolorFront'),
                        clone = source.clone();

                    // Increment input name
                    clone.find(':input.front').attr('name', function(i, val) {
                        return val + colorcountFront;
                    });
                    clone.find(':input[type=radio].front').attr('value', function(i, val) {
                        return val + count;
                    });

                    //Increment garment label
                    clone.find('#colornumberFront').text(function(i, val) {
                        return colorcountFront;
                    });

                    //Increment Color Option Values 
                    //clone.find('#color_option').attr('class', function(i, val) {
                        clone.find('#color_option').attr('style', '');  
                        return val + color_option;
                    });

                    // Put it here
                    clone.insertBefore(this);

                    colorcountFront++;
                    color_option++;
                });

这是我所拥有的克隆代码，下面是它克隆的HTML：

<div id="clonecolorFront" class="row">
    <div class="col-sm-5">
        <div class="form-group">
            <span class="input_number" id="colornumberFront">1.</span>
                <input type="text" class="front form-control form-control-short" name="PMS_Front_Color" value="" placeholder="*Type PMS or pick house color from dropdown">
        </div>
    </div>
    <div class="col-sm-2">
        <div class="form-group">
            <button type="button" class="btn btn-info btn-lg color_option_hide" data-toggle="modal" data-target="#myModal">Choose Color</button>
            </div>
        </div>
        <div class="col-md-5">
            <div id="color_option" class="color_option"></div>
        </div>
    </div>

然后我在最后（下面）有一些jquery，它接受一个属性（在这种情况下是一个html颜色代码）并将其添加到输出#color_option

$(document).ready(function() {
    $('.front-color').change(function() {
        var color = $(this).val();
        $('.color_option').text(color);
        var test_color = $(this).attr('test_color');
        $('.color_option').css('background-color', test_color);
        console.log(test_color);
        console.log(color);
    });
});

我的选项列表（在本例中为ul）如下：

<ul class="modal_color">
        <li style="color:#000;background-color:#ffffff;border:1px solid #333;">
            <label><input type="radio" class="front front-color" name="House_Color_front" value="HOUSE WHITE" test_color="#333">HOUSE WHITE</label>
        </li>
        <li style="color:#fff;background-color:#101820;">
            <label><input type="radio" class="front front-color" name="House_Color_front" value="HOUSE BLACK" test_color="#000">HOUSE BLACK</label>
        </li>
        <li style="color:#fff;background-color:#c8102e;">
            <label><input type="radio" class="front front-color" name="House_Color_front" value="HOUSE RED PMS 186C" test_color="#c8102e">HOUSE RED PMS 186C</label>
        </li>
        <li style="color:#fff;background-color:#ff6c2f;">
            <label><input type="radio" class="front" name="House_Color_front" value="HOUSE ORANGE PMS 021U">HOUSE ORANGE PMS 021U</label>
        </li>
        <li style="color:#fff;background-color:#009639;">
            <label><input type="radio" class="front" name="House_Color_front" value="HOUSE KELLY GREEN PMS 355C">HOUSE KELLY GREEN PMS 355C</label>
        </li>.............................................

希望这有助于理解：D

这样做的全部原因是，用户可以在服装上填写打印选项的订单。

他们可以选择为每件衣服添加1种以上的颜色，我可以选择“点击此处添加更多颜色”，这是克隆功能进入的地方。所以他们选择第一种颜色，这设置#color_options的背景，然后克隆，但它保持原始的内联样式，我想删除它...

Answer 1

如果你正在做的只是想要删除内联样式，你应该可以通过调用.removeAttr('style')方法来完成这项工作。

clone.find('#color_option').removeAttr('style');

clone.find attr update with function

1 个答案: