用輸入範圍僞造一個切換開關，處理自定義範圍

我需要假設一個具有輸入範圍的切換開關。這個想法是創建一個短距離，只有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

來源

2017-05-17 John Intj

既然你已經使用jQuery，您可以PHR ASE你的部件製造商作爲一個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

來源

2017-05-17 23:44:29

哇，這是驚人的流浪漢！非常感謝你，我真的很感激，我花了很多時間嘗試，而你做得很直。 –

不用擔心。練習（和年齡大）會變得更容易。 –

:)太棒了，我是一個初學者，我希望我的代碼能夠這麼好。 –

請問細化嗎？

我完成了假按鈕。正如你在這個FIDDLE

（白框就會消失，我添加了一些不透明度爲它只是表明該按鈕工作）紅色框見（現爲綠色，由於我的bug的代碼部分）是在背景和我需要它來改變顏色取決於狀態。我試過這個，但它不起作用。下面的代碼：

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

謝謝:)

來源

2017-05-18 15:37:08

用輸入範圍僞造一個切換開關，處理自定義範圍

回答

相關問題