首页 > 解决方案 > 输入自动增加/减少?

问题描述

我有几个输入,1 的标准值为 4。当我在 INPUT B 上添加 +1 时,我想做的是在 INPUT A 上做 -1。

这样(我想复制的):https ://gyazo.com/d0f289092a90c0976a4db61f90b5de7a

我的输入(只有 3 个):

<div class="modal-body">
  <div class="row">
    <div class="col-md-4">
      <figure class="card card-product">
        <center><div class="img-wrap"><img src="SCHUTTING/schutting1.jpg" width="50%" length="50%"></div></center>
        <figcaption class="info-wrap">
          <center><h4 class="title">Scherm (17 planks) 16 mm - Grenen</h4></center>
        </figcaption>
        <div class="bottom-wrap">
          <div class="input-group input-number-group">
            <div class="input-group-button">
              <span class="input-number-decrement">-</span>
            </div>
            <input class="input-number" max="10" min="0" value="4">
            <div class="input-group-button">
              <span class="input-number-increment">+</span>
            </div>
          </div>
          <div class="price-wrap h5">
            <center><span class="price-new">$1280</span></center>
          </div> <!-- price-wrap.// -->
        </div> <!-- bottom-wrap.// -->
      </figure>
    </div> <!-- col // -->
      <div class="col-md-4">
        <figure class="card card-product">
          <center><div class="img-wrap"><img src="SCHUTTING/scherm2.jpg" width="50%" length="50%"></div></center>
          <figcaption class="info-wrap">
            <center><h4 class="title">Schuin scherm links (17 planks) 16 mm</h4></center>
          </figcaption>
          <div class="bottom-wrap">
              <div class="input-group input-number-group">
                <div class="input-group-button">
                  <span class="input-number-decrement">-</span>
                </div>
                <input class="input-number" max="10" min="0" value="0">
                <div class="input-group-button">
                  <span class="input-number-increment">+</span>
                </div>
              </div>
              <div class="price-wrap h5">
                <center><span class="price-new">$1280</span></center>
              </div> <!-- price-wrap.// -->
          </div> <!-- bottom-wrap.// -->
        </figure>
      </div> <!-- col // -->
      <div class="col-md-4">
        <figure class="card card-product">
          <center><div class="img-wrap"><img src="SCHUTTING/scherm3.jpg" width="50%" length="50%"></div></center>
          <figcaption class="info-wrap">
            <center><h4 class="title">Schuin scherm rechts (17 planks) 16 mm</h4></center>
          </figcaption>
          <div class="bottom-wrap">
              <div class="input-group input-number-group">
                <div class="input-group-button">
                  <span class="input-number-decrement">-</span>
                </div>
                <input class="input-number" max="10" min="0" value="0">
                <div class="input-group-button">
                  <span class="input-number-increment">+</span>
                </div>
              </div>
              <div class="price-wrap h5">
                <center><span class="price-new">$1280</span></center>
              </div> <!-- price-wrap.// -->
          </div> <!-- bottom-wrap.// -->
        </figure>
      </div> <!-- col // -->
      </div>
</div>

如果可能的话,我想用 Jquery 来做这件事。但我不知道如何调用这个(函数),所以我没有发现任何有用的东西,只得到了一些模糊的 javascript 东西,但在 Jquery 中什么也没有。

希望你们有一些信息/提示。:)

标签: jqueryhtmlcss

解决方案


推荐阅读