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＆＃39; .css，则应避免覆盖先前设置的样式信息。

＆＃13;

$(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
        });
    });
});

＆＃13;

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

＆＃13;

<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" />

＆＃13;

我的自定义jsColor onfinechange功能在从背景到颜色点击时重置颜色

1 个答案: