jQuery和范围输入

-1

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

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

$('.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/

来源

2017-06-02 Klak031

你'jsFiddle'不包含代码，只需标记。 – melancia

我不确定“输入改变”是一个有效的事件，只是写“改变” – Kashkain

@Kashkain是的，“输入”是一个有效的事件。 – melancia

这不是OPTI，但它工作得很好;）

$(function() { 
 
    $('.rgb-slider').on('input change', function() { 
 
    \t \t $(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 = ""; 
 
\t $('.rgb').each(function() { 
 
    \t str += parseInt($(this).val(), 10).toString(16); 
 
    }); 
 
    $("#hex").val(str.toUpperCase()); 
 
}

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

来源

2017-06-02 07:59:18 Kashkain

jQuery和范围输入

回答

相关问题