如果输入值发生变化，jQuery会添加.css（）

时间：2017-09-06 09:56:29

标签： javascript jquery

我有一组动态输入，如果输入的值高于0，则想要添加父元素的css。

$(document).ready(function() {
  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
      }
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
      }
    });
  });

  $('document').on('change', 'input', function() {
    if ($(this).val() > 0) {
      $(this).closest('.inputBox').css('opacity', '1');
    };
  });

  if ($('input').val() !== 0) {
    $(this).closest('.inputBox').css('opacity', '1');
  };
});
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
  <label for="sofa">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="sofa" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="table">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="table" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="piano">
    Sofa
    <span class="inputInner">
      <a class="minus">-</a>
      <input name="piano" value="0">
      <a class="plus">+</a>
    </span>
  </label>
</div>

但我不能让它发挥作用。你能告诉我哪里错了吗？

以下是整个代码：https://jsfiddle.net/dr7z7tkf/1/

5 个答案:

答案 0 :(得分：2)

要实现您的需求，您应该在更新其值后在change上触发input事件。

您还需要将$('document')更改为$(document)。还不需要嵌套的document.ready事件处理程序，因为您可以将所有逻辑放在一个逻辑处理器中。

最后，您可以通过在递增a元素上使用单击处理程序来干扰和改进逻辑，如下所示：

＆＃13;
＆＃13; 
$(function() {
  $('.plus, .minus').on('click', function() {
    var $btn = $(this);
    $btn.siblings('input').val(function(i, v) {
      var newV = (parseInt(v, 10) || 0) + $btn.data('inc');
      return newV >= 0 ? newV : v;
    }).change();
  });

  $(document).on('change', 'input', function() {
    $(this).closest('.inputBox').toggleClass('foo', parseInt(this.value, 10) > 0);
  }).change();
});
＆＃13; 
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
  text-decoration: none;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}

.foo {
  opacity: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
  <label for="sofa">
    Sofa
    <span class="inputInner">
      <a href="#" data-inc="-1" class="minus">-</a>
      <input name="sofa" value="0">
      <a href="#" data-inc="1" class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="table">
    Table
    <span class="inputInner">
      <a href="#" data-inc="-1" class="minus">-</a>
      <input name="table" value="0">
      <a href="#" data-inc="1" class="plus">+</a>
    </span>
  </label>
</div>

<div class="inputBox">
  <label for="piano">
    Piano
    <span class="inputInner">
      <a href="#" data-inc="-1" class="minus">-</a>
      <input name="piano" value="0">
      <a href="#" data-inc="1" class="plus">+</a>
    </span>
  </label>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将javascript更改为此并尝试：

$(document).ready(function() {

  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
        $qty.closest('.inputBox').css('opacity', '1');
      }
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
      }
    });
  });
});

我真的不知道为什么你的代码不起作用，因为我第一眼看到了设计问题。就是这样：你创建了onclick函数，然后是onchange函数。但是，如果你点击+或 - 按钮，你也会改变价值，这是不是真的？所以，我只是将更改不透明度（$qty.closest('.inputBox').css('opacity', '1');）的函数放在单击+按钮时执行的函数内。

答案 2 :(得分：0)

当您以编程方式更改值时，toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); 事件永远不会触发，您必须在单击按钮时手动触发它，并更改值

change

FIDDLE

答案 3 :(得分：0)

$ qty.trigger（＆＃39;更改＆＃39;）并确保输入事件$（文档）.on（＆＃39;输入更改＆＃39;）

＆＃13;
＆＃13; 
func peripheral(_ peripheral: CBPeripheral, didUpdateValueFor characteristic: CBCharacteristic, error: Error?) {

   let value = [UInt8](characteristic.value!)
   let newValue = ((Int16(value[1]) << 8) | (Int16(value[0])))
   let intValue = Int(newValue)
   print(intValue)
}
＆＃13; 
$(document).ready(function() {
  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
        $qty.trigger('change');
      }
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
        $qty.trigger('change');
      }
    });
  });

  $(document).on('input change', 'input', function() {
    if ($(this).val() > 0) {
      $(this).closest('.inputBox').css('opacity', '1');
    };
  });

  if ($('input').val() !== 0) {
    $(this).closest('.inputBox').css('opacity', '1');
  };
});
＆＃13; 
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您需要在点击+和-时触发更改事件。在更改事件上分析输入值

＆＃13;
＆＃13; 
$(document).ready(function() {

  $(function() {
    $('.plus').on('click', function() {
      var $qty = $(this).prev('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal)) {
        $qty.val(currentVal + 1);
      }
      $('input').trigger('change')
    });
    $('.minus').on('click', function() {
      var $qty = $(this).next('input');
      var currentVal = parseInt($qty.val());
      if (!isNaN(currentVal) && currentVal > 0) {
        $qty.val(currentVal - 1);
      }
            $('input').trigger('change')
    });
  });

  $(document).on('change', 'input', function() {
    if (parseInt($(this).val()) > 0) {
      $(this).closest('.inputBox').css('opacity', '1');
    }else{
      $(this).closest('.inputBox').css('opacity', '0.2');
    }
  });
  if ($('input').val() !== 0) {
    $(this).closest('.inputBox').css('opacity', '1');
  };

});
＆＃13; 
body {
  font-family: 'Montserrat';
  font-size: 100%;
}

.roomWrap {
  display: flex;
  flex-wrap: wrap;
}

.inputBox {
  width: 50%;
  border: 2px solid black;
  max-width: 350px;
  font-size: 1.8vw;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px;
  box-sizing: border-box;
  padding: 22px 0px 22px 20px;
  opacity: 0.2;
  cursor: pointer !important;
}

.inputBox laber {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}

span.inputInner {
  margin-left: 30px;
  display: inline-block;
  float: right;
  padding-right: 20px;
  /* padding-bottom: 20px; */
  position: relative;
  top: -8px;
  /* height: 100%; */
}

.inputInner a {
  cursor: pointer;
  font-size: 3.8vw;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  top: -4px;
}

input {
  width: 60px;
  border: none;
  text-align: center;
  font-size: 3.8vw;
  outline: none;
  vertical-align: ;
  position: relative;
  top: -5px;
  font-weight: 600;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="roomWrap">

  <div class="inputBox">
    <label for="bookshelf">Bookshelf<span class="inputInner"><a class="minus">-</a><input name="bookshelf"  value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="sofa">Sofa<span class="inputInner"><a class="minus">-</a><input name="sofa" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="love seat">Love seat<span class="inputInner"><a class="minus">-</a><input name="love seat" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="book-box">Book box<span class="inputInner"><a class="minus">-</a><input name="book-box" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="armoir">Armoir<span class="inputInner"><a class="minus">-</a><input name="armoir" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="grand-piano">Grand piano<span class="inputInner"><a class="minus">-</a><input name="grand-piano" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="upright-piano">Upright piano<span class="inputInner"><a class="minus">-</a><input name="upright-piano" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="TV">TV<span class="inputInner"><a class="minus">-</a><input name="TV" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="TV-stand">TV stand<span class="inputInner"><a class="minus">-</a><input name="TV-stand" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="coffee-table">Coffee table<span class="inputInner"><a class="minus">-</a><input name="coffee-table" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="desk">Desk<span class="inputInner"><a class="minus">-</a><input name="desk" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="plant">Plant<span class="inputInner"><a class="minus">-</a><input name="plant" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="mirror">Mirror<span class="inputInner"><a class="minus">-</a><input name="mirror" value="0"><a class="plus">+</a></span></label>
  </div>
  <div class="inputBox">
    <label for="picture">Picture<span class="inputInner"><a class="minus">-</a><input name="picture" value="0"><a class="plus">+</a></span></label>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题