私のカスタム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" />