Question

我正在制作简单的HEX到RGB / RGB到HEX转换器，我有问题用范围输入更新值。在手动输入时，一切都是它应该如何，但是当我移动滑块值时，直到我移动其他页面或在页面上输入内容时才更新。例如，如果您将滑块移动到255（任何颜色），它应该导致该颜色为FF，但我得到FA，直到我移动另一个然后第一个更改为FF。我也有数字输入需要与滑块同步，可能是它们之间的问题。

HTML

<input type="range" min="0" max="255" class="rgb-slider" id="rgb-r-slider" spellcheck="false" value="255">
<input type="number" min="0" max="255" class="rgb" id="rgb-r" value="255">

JS

$('.rgb-slider').on('input change', function() {
    $('#rgb-r').val($('#rgb-r-slider').val());
    $('#rgb-g').val($('#rgb-g-slider').val());
    $('#rgb-b').val($('#rgb-b-slider').val());
});

$('.rgb').on('input change', function() {
    $('#rgb-r-slider').val($('#rgb-r').val());
    $('#rgb-g-slider').val($('#rgb-g').val());
    $('#rgb-b-slider').val($('#rgb-b').val());
});

这里是JSFiddle文件

https://jsfiddle.net/9qynd4pn/9/

Answer 1

它不是opti但它运作良好;）

＆＃13;

$(function() {
  $('.rgb-slider').on('input change', function() {
  		$(this).siblings(".rgb").val( $(this).val() );
      updateHexaInput();
  });

  $('.rgb').on('input change', function() {
    $(this).siblings(".rgb-slider").val( $(this).val() );
    updateHexaInput();
  });
});

var updateHexaInput = function() {
var str = "";
	$('.rgb').each(function() {
  	str += parseInt($(this).val(), 10).toString(16);
  });
  $("#hex").val( str.toUpperCase() );
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <section id="color-converter" class="color-converter">

    <!-- HEX Input -->
    <div class="hex-group">
      <input type="text" id="hex" spellcheck="false" value="FFFFFF"><span></span>
    </div>
    <!-- HEX Input End -->

    <!-- RGB Input -->
    <div class="rgb-group">
      <p>R:
        <input type="range" min="0" max="255" class="rgb-slider" id="rgb-r-slider" spellcheck="false" value="255">
        <input type="number" min="0" max="255" class="rgb" id="rgb-r" value="255">
      </p>
      <p>G:
        <input type="range" min="0" max="255" class="rgb-slider" id="rgb-g-slider" spellcheck="false" value="255">
        <input type="number" min="0" max="255" class="rgb" id="rgb-g" value="255">
      </p>
      <p>B:
        <input type="range" min="0" max="255" class="rgb-slider" id="rgb-b-slider" spellcheck="false" value="255">
        <input type="number" min="0" max="255" class="rgb" id="rgb-b" value="255">
      </p>
    </div>
    <!-- RGB Input End -->

  </section>

</body>

＆＃13;

jQuery和范围输入

1 个答案: