javascript - 加/减编号

我在添加/减去输入字段中的数字这一工作。

但是，我希望结果显示在<p class="qty1"></p>而不是input字段中。

我尝试使用innerHTML自行完成此操作，但无法正常工作。

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.val(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <input id="qty1" type="text" readonly value="5" class="qty form-control" />
  <p class="qty1"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />
</div>
<hr />
<div class="form-height">
  <input id="qty2" type="text" readonly value="7" class="qty form-control" />
  <p class="qty2"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />
</div>

最佳答案

如果我正确理解了您的问题，则此代码应执行您想要的操作：

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    if (!isNaN(currentVal)) {
        newVal = isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal);
        $p.text(newVal);
        $qty.val(newVal);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <input id="qty1" type="text" readonly value="5" class="qty form-control" />
  <p class="qty1"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />
</div>
<hr />
<div class="form-height">
  <input id="qty2" type="text" readonly value="7" class="qty form-control" />
  <p class="qty2"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />
</div>

编辑如果要完全删除<input>标记，则只需对您的代码进行少量修改：

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.text()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.text(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <p class="qty">5</p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />
</div>
<hr />
<div class="form-height">
  <p class="qty">7</p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />
</div>

关于javascript - 加/减编号，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52013807/