Основание 6 - ползунок входного значения? - PullRequest
Новая
       39

Основание 6 - ползунок входного значения?

0 голосов
/ 10 октября 2018

Я пытаюсь отключить выпадающий список, если ползунок достигает своей конечной точки (4).Прикрепленный пример codepen работает, но только при непосредственном изменении входного значения.Он не работает с ползунком фундамента.

У кого-нибудь есть совет, как мне заставить слайдер фундамента играть красиво?

CODEPEN: пример здесь

HTML: 

<div class="row">
    <div class="small-2 columns">Height:</div>
    <div class="small-5 columns">
      <div class="slider" data-slider data-initial-start="3" data-options="precision:3; decimal:3; start:1; end:4; step:1;" style="margin-top: 12px;">
        <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="y"></span>
        <span class="slider-fill" data-slider-fill></span>
      </div>
   </div>
   <div class="small-5 columns">
      <input type="number" step="1" id="y" style="border: 1px solid #999999; display:inline-block; width:39%;">
      <select id="HeightFraction" name="HeightFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
        <option value="" selected="">0</option>
        <option value="1/8">1/8</option>
        <option value="1/4">1/4</option>
        <option value="3/8">3/8</option>
        <option value="1/2">1/2</option>
        <option value="5/8">5/8</option>
        <option value="3/4">3/4</option>
        <option value="7/8">7/8</option>
      </select>
      <span class="small">in.</span>
   </div>
</div>

JQUERY: 

$( "#y" ).change(function() {
    if (this.value == "4") {
      $('#HeightFraction').prop('disabled', 'disabled');
    }
    else {
      $('#HeightFraction').prop('disabled', false);
    }
});

1 Ответ

0 голосов
/ 20 ноября 2018

Ваше moved.zf.slider событие из документации в порядке.

Проблема в вашем операторе if, который пытается проверить, равно ли значение ползунка 4. Вам нужно использовать .val() вместо .value.

Полный фрагмент приведен ниже: 

$(document).foundation();

// Code to disable the select drop down (if) the input value is at 4. The below code only works if adjusting the input directly - does not work if using the slider.
$("#y").change(function() {
  if (this.value == "4") {
    $('#HeightFraction').prop('disabled', true);
  } else {
    $('#HeightFraction').prop('disabled', false);
  }
});



// In the Foundation doc "moved.zf.slider" is supposed to monitor change of the slider but I was not able to hook the value of the input to this to triger the code?
$('.slider').on('moved.zf.slider', function() {
  "use strict";

  if ($("#y").val() == "4") {
    $('#HeightFraction').prop('disabled', true);
  } else {
    $('#HeightFraction').prop('disabled', false);
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/what-input/1.1.4/what-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation-flex.css" rel="stylesheet" />
<br/>
<br/>

<div class="row">
  <div class="small-2 columns">Height:</div>
  <div class="small-5 columns">
    <div class="slider" data-slider data-initial-start="3" data-options="precision:3; decimal:3; start:1; end:4; step:1;" style="margin-top: 12px;">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="y"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="small-5 columns">

    <input type="number" step="1" id="y" style="border: 1px solid #999999; display:inline-block; width:39%;">

    <select id="HeightFraction" name="HeightFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
      <option value="" selected="">0</option>
      <option value="1/8">1/8</option>
      <option value="1/4">1/4</option>
      <option value="3/8">3/8</option>
      <option value="1/2">1/2</option>
      <option value="5/8">5/8</option>
      <option value="3/4">3/4</option>
      <option value="7/8">7/8</option>
    </select>

    <span class="small">in.</span>

  </div>
</div>
...