搜索
搜索

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

Mwordpress 发表于 Dev
56
Mwordpress

是否有可能在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

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

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

巴尔玛

这将在与该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);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在两个连续的GitHub Actions作业之间传递变量？

如何在Azure中的两个Yaml管道之间传递变量值

如何在Excel VBA中的两个Subsetet之间传递变量？

如何在具有函数的两个模块之间传递变量？

VB 13 Windows窗体-如何在两个窗体之间传递变量[编码新手]

在Flutter中的两个类之间传递变量

PHP在两个文件之间传递变量

在两个函数之间传递变量

在两个脚本之间传递变量？

Python 在两个函数之间传递变量

如何使用枚举在两个脚本之间传递变量？

如何在2个PHP文件之间传递变量？

如何在类之间传递变量

在Java中的两个类之间传递变量值

在 vb.net 中的两个表单之间传递变量时遇到问题

在Android应用程序开发中的两个活动之间传递变量

在两个JFrame之间传递变量时出现EventQueue错误

在 iOS 中的两个控制器之间传递变量

在Swift中从两个NSWindows传递变量

如何在两个视图控制器之间传递（变化的）变量？

R：如何通过两个保留其原始名称的函数传递变量？

如何在 2 个不同的文件之间传递变量并对其进行操作

如何在 Laravel 中的 2 个类之间传递变量

在函数之间传递两个变量

如何在两个组件之间传递值？

如何在两个类之间传递DocumentSnapshot Id？

如何在两个类之间传递数据？

如何在两个活动之间传递参数？

反应如何在两个组件之间传递参数

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    计算数据帧R中的字符串频率

  3. 3

    如何使用Redux-Toolkit重置Redux Store

  4. 4

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  5. 5

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  6. 6

    TreeMap中的自定义排序

  7. 7

    TYPO3：将 Formhandler 添加到新闻扩展

  8. 8

    遍历元素数组以每X秒在浏览器上显示

  9. 9

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  10. 10

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  11. 11

    无法连接网络并在Ubuntu 14.04中找到eth0

  12. 12

    将辅助轴原点与主要轴对齐

  13. 13

    我可以ping IPv6但不能ping IPv4

  14. 14

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  15. 15

    提交html表单时为空

  16. 16

    使用C ++ 11将数组设置为零

  17. 17

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

  18. 18

    尝试在Dell XPS13 9360上安装Windows 7时出错

  19. 19

    如何在R中转置数据

  20. 20

    无法使用 envoy 访问 .ssh/config

  21. 21

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

热门标签

归档