单击从背景到颜色时，我的自定义 jsColor onfinechange 函数会重置颜色

Question

所以我一直在开发自己的 "onfinechange" 函数，但我运行遇到了一个错误，我就是看不出为什么会这样。

我的期望

我希望能够使用 jscolor 更改 div 的背景或颜色并保持颜色不变。

发生了什么

例如：如果我单击并更改背景颜色，然后尝试单击并更改文本颜色，它会将背景颜色踢回原始颜色。反之亦然。

我从大局中截取了一个样本并将其记录下来，以使正在发生的事情更加清晰。

问题显然存在于 jQuery 某处，它可能是我忽略的微小问题。

$(document).ready(function () {
    $('input').on('click', function (ev) {
        var inputPiece = $(this);
        var value = $(this).val(); //what in the input box that was clicked
        var clazz = $(this).attr('data-c'); //the div to change
        var bORc = $(this).attr('data-d'); //is it a background or color
        $('div').on('mousemove', function () {
            value = $(inputPiece).val(); //if the mouse is moving check the input value
        });
        var checkColor = setInterval(function () {

            if (bORc === 'b') {// if we are changing background
                $(clazz).attr("style", "background: #" + value + ' !important');
            }
            if (bORc === 'c') {//if we are changing color
                $(clazz).attr('style', 'color: #' + value + ' !important');
            }
        }, 50);
        $('input').on('blur', function () {
            clearInterval(checkColor);// shut down the interval
        });
    });
});

#fot {
  float:right;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<input type="text" data-t="" data-c="#fot" data-d="c" class="jscolor" name='footer_color' id='footer_color' value="FFF" />
<input type="text" data-t="" data-c="#fot" data-d="b" class="jscolor" name='footer_background' id='footer_background' value="FFF" />
<div id="fot">text</div>

Answer 1

问题是您正在直接写入样式属性，这意味着您正在清除样式中的所有其他信息。但是，如果您使用 jQuery 的 .css，您应该避免覆盖以前设置的样式信息。

$(document).ready(function () {
    $('input').on('click', function (ev) {
        var inputPiece = $(this);
        var value = $(this).val(); //what in the input box that was clicked
        var clazz = $(this).attr('data-c'); //the div to change
        var bORc = $(this).attr('data-d'); //is it a background or color
        $('div').on('mousemove', function () {
            value = $(inputPiece).val(); //if the mouse is moving check the input value
        });
        var checkColor = setInterval(function () {

            if (bORc === 'b') {// if we are changing background
                $(clazz).css("background", '#' + value);
            }
            if (bORc === 'c') {//if we are changing color
                $(clazz).css("color", '#' + value);
            }
        }, 50);
        $('input').on('blur', function () {
            clearInterval(checkColor);// shut down the interval
        });
    });
});

#fot {
  display:inline-block;
  font-size:40px;
  background-color:black;
  color:red;
  margin:10px;
  padding:10px;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<div id="fot">text</div><br />
<input type="text" data-t="" data-c="#fot" data-d="c" class="jscolor" name='footer_color' id='footer_color' value="FFF" />
<input type="text" data-t="" data-c="#fot" data-d="b" class="jscolor" name='footer_background' id='footer_background' value="FFF" />

单击从背景到颜色时，我的自定义 jsColor onfinechange 函数会重置颜色

My Custom jsColor onfinechange function resets colors when clicking from background to color

jquery

jscolor