伪造带有输入范围的拨动开关，处理自定义范围

Question

我需要伪造一个带有输入范围的拨动开关。这个想法是创建一个短范围，只有 2 个值，最小值和最大值。 css 按钮将匹配范围的一端。到目前为止，您单击它，包含范围的div 将移动一点，将游侠的另一端置于鼠标下方。

我有这个功能，它适用于页面上的所有输入范围。但是我只需要在某些类上应用它，而不是全部。但是我找不到正确的语法，它不起作用。

Javascript：

$('input[type="range"]').on('change', function() {
$('div#launcher01').css('margin-top', parseInt($(this).val()  ) > 0 ? parseInt($(this).val()  ) + 'px' : '0px');
    });

.CSS：

.fakbl input {
height: 50px;
width: 50px;

.HTML：

<div id="launcher01">
<div class="fakbl">
<input type="range" id="launch01" name="launch01" min="0" max="50" step="50"" />
</div>
</div> 

小提琴

Answer 1

由于您已经在使用 jQuery，您可以将您的小部件制造商表述为 jQuery 插件，如下所示：

$.fn.rangeButton = function(containerSelector) {
    return this.each(function() {
        var $self = $(this);
        $self.on('change', function() {
            $self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
        }).trigger('change'); // trigger 'change' immediately to initialize everything.
    });
};

现在，在每个

范围上调用小部件，并为相应的容器传递一个选择器：

$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');

演示

或者，通过为所有容器提供相同的类，您可以使用单个命令调用所有小部件：

$('.myClass input[type="range"]').rangeButton('.myClass');

演示

Answer 2

我可以问一个改进吗？

我完成了假按钮。正如你在这个小提琴中看到的

(白框将消失，我添加了一些不透明度只是为了显示按钮正在工作(红色框(由于我的错误代码部分，现在为绿色(在背景中，我需要它根据状态更改颜色。我试过这个，但它不起作用。这里的代码：

 $.fn.rangeButton = function(containerSelector) {
        return this.each(function() {
            var $self = $(this);
            $self.on('change', function() {  
                $self.closest(containerSelector).css('margin-left',     ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');

   //   this part is not working, if you remove this part, the button works flawlessy
          if ($self = 100) {
              document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 191, 1)"; 
          } else {
              document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 0, 255)"; 
          }  
    //   end of buggy code

            }).trigger('change'); // trigger 'change' immediately to initialize everything.
        });
    };
    $('#launcher01 input[type="range"]').rangeButton('#launcher01');
    $('#launcher02 input[type="range"]').rangeButton('#launcher02');

谢谢：(