если входное пошаговое значение> 0 addClass к родительскому div, иначе removeClass - PullRequest
Новая
       13

если входное пошаговое значение> 0 addClass к родительскому div, иначе removeClass

0 голосов
/ 19 сентября 2018

Мне нужно добавить класс (добавленный устройством) в родительское погружение (устройство), если пользователь увеличивает входное значение выше (0), и удалить его, если он решил установить значение обратно в (0).сделал так: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Some Text</h2>
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="device workstations">
        <h3>Workstations</h3>
        <div class="sub">
          <input id="workstation" type="text" value="0" min="0" max="1000" class="form-control stepper">
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="device servers">
        <h3>Servers</h3>
        <div class="sub">
          <input id="server" type="text" value="0" min="0" max="1000" class="form-control stepper">
        </div>
      </div>
    </div>
    More cols as above...
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <a href="#" class="make_url">Order URL</a>
    </div>
  </div>
</div>
<script>
  $('.make_url').click(function(e) {
    e.preventDefault();

    var url = "http://www.example.com/cart.php?a=add&pid=" + $("input[name=data-location]:checked").data('id') + "&configoption[569]=" + $('#workstation').val() + "&configoption[570]=" + $('#server').val() + "&configoption[572]=" + $('#mobile').val();
    alert(url);
    //window.location.href = url;
    /*
    window.open(url, '_blank');
    */

  });

  // This is not working as it should
  $('input.stepper').click(function() {
    if ($(this).val() > 0) {
      $(this).parent().parent().parent().addClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
    } else {
      $(this).parent().parent().parent().removeClass('device-added'); // I think it's better to hunt the div.device insted of .parent()
    }
  });
</script>

Приведенный выше класс работает только при нажатии на вход, но не при использовании стрелок вверх / вниз.

Заранее спасибо.

Редактировать: jquery.stepper.min.js используется для степпера

Степпер изменит выходной sub div на 

<div class="sub">
    <div class="stepper-wrap" style="margin: 0px 45px 0px 0px;">
        <input id="servers" value="0" min="0" max="1000" class="form-control stepper" style="margin: 0px;" type="text">
        <div class="stepper-btn-wrap">
            <a class="stepper-btn-up">▴</a>
            <a class="stepper-btn-dwn">▾</a>
        </div>
    </div>
</div>

@ Михай, используя .parents (), добавит класс всемdivs не только родитель.

Я могу и буду использовать type = "number" на данный момент, удалить степпер и использовать $ ('input.form-control'). click (function () {Это будет делатьэто, как говорит Бенди, и теряет пользовательский вид для присоединения и делает это каким-то другим способом, потому что номер типа ввода ужасен

Спасибо всем за помощь.

с помощью jquery stepper

1 Ответ

0 голосов
/ 19 сентября 2018

Решение, как показано ниже: 

<input id="workstation" type="number" value="0" min="0" max="1000" class="form-control stepper" onchange="alert(this.value)">
  • Изменить type = "text" на type = "number"
  • Вместо этого используйте событие onchange.Если jQuery: $('input.stepper').change(function(){ ... })
  • Следует преобразовать значение в int, используя parseInt($(this).val())
...