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和範圍輸入

回答

相關問題