使用输入范围伪造拨动开关，处理自定义范围答案

【问题标题】：Faking a toggle switch with an Input Range, dealing with custom range使用输入范围伪造拨动开关，处理自定义范围
【发布时间】：2017-05-17 22:06:46
【问题描述】：

我需要伪造一个带有输入范围的拨动开关。这个想法是创建一个短范围，只有 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>

Fiddle

【问题讨论】：

标签： javascript jquery input range toggle

【解决方案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');

Demo

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

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

Demo

【讨论】：

哇，漫游者太棒了！非常感谢，我真的很感激，我花了这么多时间尝试，你说得这么直。
不用担心。通过练习（和大龄）变得更容易。

【解决方案2】：

我可以问一个改进吗？

我完成了假按钮。正如您在FIDDLE 中看到的那样

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

 $.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');

谢谢:)

【讨论】：