如果输入步进值 > 0 addClass 到父 div 否则 removeClass答案

【问题标题】：if input stepper value > 0 addClass to parent div else removeClass如果输入步进值 > 0 addClass 到父 div 否则 removeClass
【发布时间】：2019-02-23 09:31:16
【问题描述】：

如果用户将输入值增加到 (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 用于步进器

步进器会将输出的子 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>

@Mihai 使用 .parents() 将向所有 div 添加类，而不仅仅是父级。

我现在可以并且将使用 type="number" 并移除步进器并使用 $('input.form-control').click(function() { 它会像 Bendy 说的那样做，并且会失去自定义外观以附加并以其他方式做，因为输入类型号很难看

感谢大家的帮助。

using jquery stepper

【问题讨论】：

既然有.parents()，为什么还要使用parent().parent()？你也使用click() 事件。所以它只适用于点击。尝试使用change() 或keyup() 或同时使用两者。在这里阅读 - > stackoverflow.com/questions/3940258/…
$('input.stepper').click(function () {} 专门绑定到点击事件。即正常工作
您显示的代码中没有箭头...？
因为这是我在网上的例子中找到的，我对JS了解的很少，所以我在这里问也许有人可以帮助我。
抱歉，Rory，它需要 jquery.stepper.min.js 才能出现。

标签： javascript jquery stepper

【解决方案1】：

解决方法如下：

<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(){ ... })
应使用 parseInt($(this).val()) 将值转换为 int

【讨论】：