$ thisまたはvarsを使用してJavaScriptコードを減らす方法

-1

ここにテストコード全体があります。

最終的には、異なるID（パターンなし）を持つ多数のスライダと入力フィールドがありますので、繰り返しコードを使用するのではなく、$ thisまたはvarsを使用します。

スライダーの3最大値があります：5、10、15

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" /> 
    <script src="js/jquery.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="js/jquery.ui.touch-punch.min.js"></script> 
    <script> 
    $(function() { 
     $("#slider1").slider({ 
      value:0, min: 0, max: 5, step: 1, 
      slide: function(event, ui) { 
       $("#amount1").val(ui.value); 
      } 
     }); 
     $("#amount1").val($("#slider1").slider("value")); 

     $("#slider2").slider({ 
      value:0, min: 0, max: 10, step: 1, 
      slide: function(event, ui) { 
       $("#amount2").val(ui.value); 
      } 
     }); 
     $("#amount2").val($("#slider2").slider("value")); 

     $("#slider3").slider({ 
      value:0, min: 0, max: 15, step: 1, 
      slide: function(event, ui) { 
       $("#amount3").val(ui.value); 
      } 
     }); 
     $("#amount3").val($("#slider3").slider("value")); 
    }); 
    </script> 
    <style> 
    .steps { 
     border: 1px solid transparent; 
     position: relative; 
     height: 30px; 
    } 
    .tick { 
     border: 1px solid transparent; 
     position: absolute; 
     width: 1.2em; 
     margin-left: -.6em; 
     text-align:center; 
     left: 0; 
    } 
    .ui-slider .ui-slider-handle { 
     width: 2em; 
     height: 3em; 
     top: -1.4em; 
     margin-left: -1em; 
    } 
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
     border: 2px solid #d3d3d3; 
     background: #333; 
    } 
    </style> 
</head> 
<body style="font-size: small;"> 

    <div style="display:block;margin:100px auto;padding:0 8%"> 
     <input type="text" id="amount1" style="border:0 none"> 

     <div id="slider1"></div> 

     <div class="steps"> 
      <?php 
      for ($i=0, $t=5; $i<=$t; $i++) { 
       echo '<span class="tick" style="left:'.(100/$t*$i).'%;'; 
       if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;'; 
       echo '">|<br>'.$i.'</span>'; 
      } 
      ?> 
     </div> 
    </div> 

    <div style="display:block;margin:100px auto;padding:0 8%"> 
     <input type="text" id="amount2" style="border:0 none"> 

     <div id="slider2"></div> 

     <div class="steps"> 
      <?php 
      for ($i=0, $t=10; $i<=$t; $i++) { 
       echo '<span class="tick" style="left:'.(100/$t*$i).'%;'; 
       if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;'; 
       echo '">|<br>'.$i.'</span>'; 
      } 
      ?> 
     </div> 
    </div> 

    <div style="display:block;margin:100px auto;padding:0 8%"> 
     <input type="text" id="amount3" style="border:0 none"> 

     <div id="slider3"></div> 

     <div class="steps"> 
      <?php 
      for ($i=0, $t=15; $i<=$t ; $i++) { 
       echo '<span class="tick" style="left:'.(100/$t*$i).'%;'; 
       if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;'; 
       echo '">|<br>'.$i.'</span>'; 
      } 
      ?> 
     </div> 
    </div> 

</body> 
</html>

出典

2016-09-01 Daniel Yantis

あなたはあなたのスライダーにdata属性を与える必要がありますスライダの値、最小値と最大値などを保持し、別のclassとそれにinitスライダをつけます。例は次のようになります。

<div style="display:block;margin:100px auto;padding:0 8%"> 
    <input type="text" id="amount3" style="border:0 none" class="slider_value"> 

    <div id="slider3" class="slider_container" data-value="0" data-min="0" data-max="15" data-steps="1"></div> 

    <div class="steps"> 
     <?php 
     for ($i=0, $t=15; $i<=$t ; $i++) { 
      echo '<span class="tick" style="left:'.(100/$t*$i).'%;'; 
      if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;'; 
      echo '">|<br>'.$i.'</span>'; 
     } 
     ?> 
    </div> 
</div>

そして：

$(function(){ 
    var value, step, min, max, input; 

    $('.slider_container').each(function(){ 
     input = $(this).prev('.slider_value'); 
     value = $(this).data('value'); 
     step = $(this).data('steps'); 
     min = $(this).data('min'); 
     max = $(this).data('max'); 

     $(this).slider({ 
      value: value, 
      min: min, 
      max: max, 
      step: step, 
      slide: function(event, ui) { 
       $(this).prev('.slider_value').val(ui.value); 
      } 
     }); 

     input.val($(this).slider("value")); 
    }); 
});

出典

2016-09-01 05:27:26 Eihwaz

それは近いです！最後のスライダが動いたときに最後の入力フィールドを更新するだけです。 slider2が最後になったときに、slider3と同じ結果を削除しました。最後のスライダー入力のみが更新されます。 –

最新のコードを使用していますか？私は自分の投稿をたくさん編集しました。そして、最後の編集は 'slide'関数を使って正確に行う必要がありました。 – Eihwaz

SWEET！あなたが変化に取り組んでいる間、私はあなたの答えをコピーしたに違いないようです。これは素晴らしい作品です。 –

私はループが重複したコードを減らすだろうと思う：

var numElements = 3; 
for (var i = 0; i < numElements; i++) { 
    var $slider = $('#slider'+i); 
    var $amount = $('#amount'+i); 
    $slider.slider({ 
     value:0, min: 0, max: 5, step: 1, 
     slide: function(event, ui) { 
      $amount.val(ui.value); 
     } 
    }); 
    $amount.val($slider.slider("value")); 
}

出典

2016-09-01 05:18:29

述べたように：#sliderと#amountが他のIDの束になります。何でも1だけではありません。 –

"他のidの束"は実際にはIDがパターンに従わないことを示していません - 私が投稿した答えはあなたのサンプルコードを単純化し、それは本当に私たちが処理しなければならないものです。より具体的な詳細を投稿したい場合は、私の回答を修正することができます –

編集されたオリジナルは最終IDのパターンが表示されていません –

$ thisまたはvarsを使用してJavaScriptコードを減らす方法

答えて

関連する問題