Question

我想在用户完成拖动ColorPicker（wpColorPicker或IrisColorPicker）后更改SVG形状的填充颜色，因为有十几个SVG形状，每个形状都有很多圆形，路径等......

所以我试图在AutomatticIris中找到像[完成或类似的东西]这样的事件，但我失败只有[更改]可用Iris docs但因为我使用AJAX从服务器获得SVG形状它是在变革事件中不可能完成这项工作。

Answer 1

针对这类问题的常见解决方案是每次发生更改事件时清除并启动计时器（通过setTimeout）。因此，如果更改事件在特定时间内没有被触发（由setTimeout设置的间隔），则计时器仅触发。

这是一个片段，用于在颜色选择器中最后一次更改后1秒（1000毫秒）更改标题的颜色：

jQuery(document).ready(function($){
    console.log('ready');
    var color = null;
    var timer = null;
    var changed = function(){
        console.log("Changed");
        $("#headlinethatchanges").css( 'color', color);
    };
    $('#color-picker').iris({
        width: 400,
        hide: false,
        change: function(event, ui) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(changed, 1000);
            color = ui.color.toString();
        }
    });
});

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
    <script src="http://automattic.github.io/Iris/javascripts/prism.js"></script>

<h1 id="headlinethatchanges">Iris Test</h1>
<input type="text" id="color-picker" value="#bada55" />

在mouseup，keyup或done之后从wpColorPicker（Iris）获取颜色

1 个答案: