Question

我有一个JQueryUI滑块。通过单击5个单选按钮中的一个来设置滑块的值，并且反向移动滑块的相同功能选择单选按钮。

我想在每个单选按钮上添加一个“已检查”等级，其值等于和低于滑块的当前值，如果它存在于更高值的单选按钮中，则删除该类 - IE，我想要如果滑块的值为“2”，则实现以下标记：

<div class="column size10">
    <div class="slider" id="smoker" data-begin="0" data-end="4"></div>
    <input type="radio" class="smoker_radio checked" name="[smoker]" value="0" id="smoker[1]"/>
    <input type="radio" class="smoker_radio checked" name="[smoker]" value="1" id="smoker[2]"/>
    <input type="radio" class="smoker_radio checked" name="[smoker]" value="2" id="smoker[3]"/>
    <input type="radio" class="smoker_radio" name="[smoker]" value="3" id="smoker[4]"/>
    <input type="radio" class="smoker_radio" name="[smoker]" value="4" id="smoker[5]"/>
</div>

我将滑块的值传递给函数checkRadio。见JSFiddle.

检查此类并将类分配给正确的单选按钮的最佳方法是什么？

- 更新 -

上面有一个JSFiddle链接 - 这里是我如何将滑块值传递给函数checkRadio（）：

//When radio buttons are changed, update slider 
$('[name="[smoker]"]').change(function () {
    var value = this.value;
    $('#smoker').slider("value", value);
    checkRadio(value);
});

//When slider is changed, update radio buttons 
$('#smoker').on('slidechange', function () {
    var value = $(this).slider('value');
    $('[name="[smoker]"][value="' + value + '"]').prop("checked", true);
    checkRadio(value);
});

function checkRadio(val) {
  var value = val;
  console.log(value)

}

Answer 1

试试这个

function checkRadio(val) {
  var value = val;
    $('input.smoker_radio').removeClass('checked');
    $('input.smoker_radio').each(function(){
        if( $(this).val() <= value){
            $(this).addClass('checked');
        }
    });

如何为每个值为＆lt;的单选按钮添加一个类？当前值？

1 个答案: