Question

我在Stackoverflow上发现了类似的主题，但不一样。我在我的项目中使用jquery Minicolors：https://github.com/claviska/jquery-miniColors/

一切正常，但我需要做的很简单 - 我需要获得实际的颜色值并将其写入HTML文档。例如，我需要这样做：

<p><script>document.write(actualColor);</script></p>

只需在静态HTML中的任何位置编写实际颜色代码即可。我在JS中非常糟糕，我找不到一些有效的解决方案。

我的minicolors代码如下所示：

        <script>
        $(document).ready( function() {
            $('.color-picker-1').each( function() {
                $(this).minicolors({
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    inline: $(this).attr('data-inline') === 'true',
                });
            });
        });
    </script>

我只使用此输入来选择颜色：

<input type="text" id="inline" class="color-picker-1" data-inline="true" value="#4fc8db">

我该怎么办？我想解决方案非常简单。

Answer 1

在更改颜色时，将值重新指定给input元素，使其包含新值。然后你可以使用该值。如果需要，您还可以创建另一个隐藏的输入元素来存储颜色值。

更改颜色值时会触发

'更改'事件。这是所有DOM操作应该进入的地方。

$("#inline").minicolors({
    change: function(hex, opacity) {
        $("#inline").val(hex);
    }
});

在你的代码上：

<script>
        $(document).ready( function() {
            $('.color-picker-1').each( function() {
                $(this).minicolors({
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    change: function(hex, opacity) {
                        $(this).val(hex);
                    }
                });
            });
        });
    </script>

jQuery Minicolors - 如何用HTML编写值？

1 个答案: