jquery如何在两个之间传递变量

Question

是否可以在jquery

中传递两个变量

这是我的代码

    var gcolor;
    $('input[id^="cat-color"]').each(function() {
        function rgb2hex(rgb){
         rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
         return "#" +
          ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
          ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
          ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
        }
        var gcolor = rgb2hex($(this).css( "color" ));


    });
    $('a.wp-color-result').each(function() {
        //console.log(gcolor);
        $(this).css('background-color', gcolor);
    });

html只有一个类别有14个类别

<div class="color-category-wrap">
    <div class="color-category-col-1"><span class="desc">Android</span>
    </div>
    <div class="color-category-col-2">
        <div class="title">Color : </div>
        <div class="wp-picker-container">
            <a class="wp-color-result" tabindex="0" title="Select Color" data-current="Current Color" style="background-color: rgb(238, 238, 34);"></a><span class="wp-picker-input-wrap"><input type="text" value="" placeholder="" name="mwp_newsbt[cat-color20][color]" id="cat-color20" class="color regular-text wp-color-picker" style="display: none; color: rgb(153, 153, 153);"><input type="button" class="button button-small wp-picker-clear hidden" value="Clear"></span>
            <div class="wp-picker-holder">
                <div class="iris-picker iris-mozilla iris-border" style="display: none; width: 255px; height: 202.125px; padding-bottom: 23.2209px;">
                    <div class="iris-picker-inner">
                        <div class="iris-square" style="width: 182.125px; height: 182.125px;"><a href="#" class="iris-square-value ui-draggable ui-draggable-handle" style="left: 30.3333px; top: 12.74px;"><span class="iris-square-handle ui-slider-handle"></span></a>
                            <div class="iris-square-inner iris-square-horiz" style="background-image: -moz-linear-gradient(left center , rgb(255, 35, 35), rgb(255, 145, 35), rgb(255, 255, 35), rgb(145, 255, 35), rgb(35, 255, 35), rgb(35, 255, 145), rgb(35, 255, 254), rgb(35, 145, 255), rgb(35, 35, 255), rgb(145, 35, 255), rgb(254, 35, 255), rgb(255, 35, 145), rgb(255, 35, 35));"></div>
                            <div class="iris-square-inner iris-square-vert" style="background-image: -moz-linear-gradient(center top , transparent, rgb(0, 0, 0));"></div>
                        </div>
                        <div class="iris-slider iris-strip" style="height: 205.346px; width: 28.2px; background-image: -moz-linear-gradient(center top , rgb(234, 234, 0), rgb(237, 237, 237));">
                            <div class="iris-slider-offset ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 86%;"></span>
                            </div>
                        </div>
                    </div>
                    <div class="iris-palette-container">
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(0, 0, 0); height: 19.5784px; width: 19.5784px; margin-left: 0px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(255, 255, 255); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(221, 51, 51); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(221, 153, 51); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(238, 238, 34); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(129, 215, 66); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(30, 115, 190); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(130, 36, 227); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="title">Background : </div>
        <div class="wp-picker-container">
            <a class="wp-color-result" tabindex="0" title="Select Color" data-current="Current Color"></a><span class="wp-picker-input-wrap"><input type="text" value="" placeholder="" name="mwp_newsbt[cat-color20][background]" id="cat-color20" class="color regular-text wp-color-picker" style="display: none; color: rgb(153, 153, 153);"><input type="button" class="button button-small hidden wp-picker-clear" value="Clear"></span>
            <div class="wp-picker-holder">
                <div class="iris-picker iris-mozilla iris-border" style="display: none; width: 255px; height: 202.125px; padding-bottom: 23.2209px;">
                    <div class="iris-picker-inner">
                        <div class="iris-square" style="width: 182.125px; height: 182.125px;"><a href="#" class="iris-square-value ui-draggable ui-draggable-handle" style="left: 0px; top: 182.133px;"><span class="iris-square-handle ui-slider-handle"></span></a>
                            <div class="iris-square-inner iris-square-horiz" style="background-image: -moz-linear-gradient(left center , rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));"></div>
                            <div class="iris-square-inner iris-square-vert" style="background-image: -moz-linear-gradient(center top , transparent, rgb(0, 0, 0));"></div>
                        </div>
                        <div class="iris-slider iris-strip" style="height: 205.346px; width: 28.2px; background-image: -moz-linear-gradient(center top , rgb(0, 0, 0), rgb(0, 0, 0));">
                            <div class="iris-slider-offset ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 0%;"></span>
                            </div>
                        </div>
                    </div>
                    <div class="iris-palette-container">
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(0, 0, 0); height: 19.5784px; width: 19.5784px; margin-left: 0px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(255, 255, 255); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(221, 51, 51); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(221, 153, 51); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(238, 238, 34); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(129, 215, 66); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(30, 115, 190); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(130, 36, 227); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="title">Border : </div>
        <div class="wp-picker-container">
            <a class="wp-color-result" tabindex="0" title="Select Color" data-current="Current Color"></a><span class="wp-picker-input-wrap"><input type="text" value="" placeholder="" name="mwp_newsbt[cat-color20][border]" id="cat-color20" class="color regular-text wp-color-picker" style="display: none; color: rgb(153, 153, 153);"><input type="button" class="button button-small hidden wp-picker-clear" value="Clear"></span>
            <div class="wp-picker-holder">
                <div class="iris-picker iris-mozilla iris-border" style="display: none; width: 255px; height: 202.125px; padding-bottom: 23.2209px;">
                    <div class="iris-picker-inner">
                        <div class="iris-square" style="width: 182.125px; height: 182.125px;"><a href="#" class="iris-square-value ui-draggable ui-draggable-handle" style="left: 0px; top: 182.133px;"><span class="iris-square-handle ui-slider-handle"></span></a>
                            <div class="iris-square-inner iris-square-horiz" style="background-image: -moz-linear-gradient(left center , rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));"></div>
                            <div class="iris-square-inner iris-square-vert" style="background-image: -moz-linear-gradient(center top , transparent, rgb(0, 0, 0));"></div>
                        </div>
                        <div class="iris-slider iris-strip" style="height: 205.346px; width: 28.2px; background-image: -moz-linear-gradient(center top , rgb(0, 0, 0), rgb(0, 0, 0));">
                            <div class="iris-slider-offset ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><span tabindex="0" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 0%;"></span>
                            </div>
                        </div>
                    </div>
                    <div class="iris-palette-container">
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(0, 0, 0); height: 19.5784px; width: 19.5784px; margin-left: 0px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(255, 255, 255); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(221, 51, 51); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(221, 153, 51); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(238, 238, 34); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(129, 215, 66); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(30, 115, 190); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                        <a tabindex="0" class="iris-palette" style="background-color: rgb(130, 36, 227); height: 19.5784px; width: 19.5784px; margin-left: 3.6425px;"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

html http://pastebin.com/XSAw9bY5

我在控制台日志中看到未定义的gcolor

保存更改时colorpicker的问题（ajax）切换的颜色在光标移动时更新，但在页面刷新时消失

何时选择颜色并保存更改 http://img11.hostingpics.net/pics/159977categorycolor2.png

Answer 1

尝试将这两个函数嵌套到这两个函数中：

$('input[id^="cat-color"]').each(function() {
        function rgb2hex(rgb){
         rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
         return "#" +
          ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
          ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
          ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
        }
        var gcolor = rgb2hex($(this).css( "color" ));
        $('a.wp-color-result').each(function(gcolor) {
        //console.log(gcolor);
        $(this).css('background-color', gcolor);
    });
});

Answer 2

这会将a.wp-color-result元素的颜色设置为与cat-color元素相同的类别：

function rgb2hex(rgb){
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" +
        ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}
$('input[id^="cat-color"]').each(function() {
    var gcolor = rgb2hex($(this).css( "color" ));
    $(this).closest(".color-category-wrap").find('a.wp-color-result').css('background-color', gcolor);
});