我的自定义 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

问题是你直接写入 style 属性，这意味着你正在擦除样式中的所有其他信息。 但是，如果使用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" />