javascript - 更改输入微调器编号并随之更改输入值

Question

我正在尝试为一家销售食品的网上商店制作一张元素卡。我想做的是，第一次单击带有购物车图标的按钮时，项目数量增加+1(现在它按我在输入元素上设置的步骤增加)。但我也希望它按照输入值定义的步骤增加产品的值(value)(重量/数量)，并且购物车图标必须更改为加号图标(我设法做到了)。对于减号按钮，逻辑是相反的......所以我点击-按钮，值/权重下降，数量下降，如果达到0，它们应该消失。

示例:我单击购物车图标，金额会增加到 1，值(value)/重量会增加到 0.25 公斤...如果我再次单击购物车按钮，金额会增加到 2，重量会增加到 0.5 公斤。现在，如果我单击“-”按钮，则数量会下降到 1，重量会下降到 0.25kg，如果我再次单击它，数量会下降到 0，重量会下降到 0，并且按钮 - 图标和输入字段会消失。

我的问题:

1. 我的第一个问题是我无法设置增加的金额按 1 和值/重量按定义的步长
2. 我的第二个问题是我的代码一直隐藏 [-] 按钮并且每次点击时输入字段，而不是达到 0 时输入字段
3. 这种方法是否正确，或者我是否使我正在做的事情变得过于复杂想做什么？有没有更简单的解决方案？

我在this中提供jsfiddle链接，以便您可以了解我的代码，并希望理解并帮助我解决一些问题...

我的 HTML 布局:

<div class="container">
    <div class="row">
        <div class="col-6 col-md-4 col-lg-3 product-card-wrapper">
            <div class="product-card">
                <div class="row">
                    <div class="col-12">
                        <div class="product-card-image-wrapper">
                            <a href="#" class="product-image-link">
                                <div class="product-card-image"></div>
                            </a>
                            <div class="prodAmountBox"><span class="prodAmount valueOnChange hidden"></span> kg</div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="product-card-body">
                            <div class="product-heading">
                                <h3><a href="#">File mignon</a></h3>
                            </div>
                            <div class="heartIT-btn-holder">
                                <a href="#" class="heartIt">
                                    <div class="crossFadeImg">
                                        <img src="./assets/images/heart.svg" alt="" class="img-fluid bottom" />
                                        <img src="./assets/images/heart_black.svg" alt=""
                                            class="img-fluid top transparent" />
                                    </div>
                                </a>
                            </div>
                            <div class="product-desc">
                                <p class="m-0">Dry aged steak cca. 250g</p>
                            </div>
                            <div class="product-price-box">
                                <div class="product-price">8,78<span> €/pc.</span></div>
                                <div class="price-per-full-unit">Price per kg: 43.89 €</div>
                            </div>
                            <div class="product-weight">
                                <input id="changedInput" data-name="Item One" data-price="8.78" type="number" value=""
                                    data-decimals="2" min="0.25" max="999" step="0.25" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的 javascript + jQuery:

$(document).ready(function () {
  $("input[type='number']").inputSpinner({
    decrementButton: "<strong class='decreaseInCart'>-</strong>",
    incrementButton: "<strong class='addToCart'>+</strong>",
    buttonsClass: 'btn-outline-secondary',
    groupClass: 'flex-nowrap'
  });
  var $changedInput = $('#changedInput');
  var $valueOnInput = $('#valueOnInput');
  var $valueOnChange = $('.valueOnChange');
  $changedInput.on('input', function (event) {
    $valueOnInput.html($changedInput.val());
  });
  $changedInput.on('change', function (event) {
    $valueOnChange.html($changedInput.val());
  });

  //Klik event ki zamenja sliko košarice z plus znakom
  $('.btn-increment').click(function () {
    $('.input-group-prepend').css('display', 'block');
    $('.input-group-text').css('display', 'block');
    $('.form-control').css('display', 'block');
    $('strong').removeClass('addToCart');
  });

  $('.btn-decrement').click(function () {
    $('.input-group-prepend').css('display', 'none');
    $('.input-group-text').css('display', 'none');
    $('.form-control').css('display', 'none');
    $('strong').addClass('addToCart');
  });
});

对于输入字段，我使用 this插件

Answer 1

1. 您只是将值从 amount 分配为 kilos，而不对其进行处理。你可以用这个代码解决它 $changedInput.val() * 0.25 .

2. 您在未检查值的情况下隐藏了减号按钮。您可以通过 if($changedInput.val() != 0) 解决.

3. 如果您执行相同的操作，则可以组合选择器，如下所示:$(".input-group-prepend, .input-group-text, .form-control").css('display', "none"); .

您还遇到输入值问题: <input id="changedInput" data-name="Item One" data-price="8.78" type="number" value="" data-decimals="2" min="0.25" max="999" step="0.25"/> 。步骤应为 1，分钟应为 0。

以下是解决所有这些问题的示例:

$(document).ready(function() {
  $("input[type='number']").inputSpinner({
    decrementButton: "<strong class='decreaseInCart'>-</strong>",
    incrementButton: "<strong class='addToCart'>+</strong>",
    buttonsClass: "btn-outline-secondary",
    groupClass: "flex-nowrap",
  });
  var $changedInput = $("#changedInput");
  var $valueOnInput = $("#valueOnInput");
  var $valueOnChange = $(".valueOnChange");
  let $dataFactor = $changedInput.attr("data-factor");
  $changedInput.on("input", function(event) {
    $valueOnInput.html($changedInput.val())
  })
  $changedInput.on("change", function(event) {
    $valueOnChange.html($changedInput.val() * $dataFactor);
  })

  //Klik event ki zamenja sliko košarice z plus znakom
  $(".btn-increment").click(function() {
    $(".input-group-prepend, .input-group-text, .form-control").css('display', "block");
    $("strong").removeClass("addToCart");
  });

  $(".btn-decrement").click(function() {
    if ($changedInput.val() != 0)
      return;

    $(".input-group-prepend, .input-group-text, .form-control").css('display', "none");
    $("strong").addClass("addToCart");
  });
});

/*___Color_variables___*/

.product-card-wrapper {
  padding-left: 10px;
  padding-right: 10px;
}

.product-card {
  border-radius: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
  background: #FFFFFF;
  margin-bottom: 15px;
}

.product-card .product-card-image-wrapper {
  position: relative;
}

.product-card .product-card-image-wrapper a .product-card-image {
  height: 220px;
  background: url("https://sharpmagazineme.com/uploads/2018/10/05102018195139.jpg") no-repeat center;
  background-size: cover;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.product-card .product-card-image-wrapper .prodAmountBox {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  left: 9px;
  bottom: 0;
  position: absolute;
  color: #FFFFFF;
  background: red;
  padding: 4px 6px;
  font-size: 0.875em;
}

.product-card .product-card-body {
  position: relative;
  height: 180px;
  padding: 10px;
}

.product-card .product-card-body .product-heading {
  width: 95%;
}

.product-card .product-card-body .product-heading h3 {
  text-transform: uppercase;
  font-size: 1em;
}

.product-card .product-card-body .product-heading h3 a {
  text-decoration: none;
  color: #000000;
}

.product-card .product-card-body .heartIT-btn-holder .heartIt {
  position: absolute;
  top: 9px;
  right: 9px;
  background-color: #FFFFFF;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
}

.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg {
  position: relative;
  height: 30px;
  width: 30px;
  margin: 5px auto;
  text-align: center;
}

.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg img {
  height: 18px;
  position: absolute;
  top: 2px;
  left: 6px;
}

.product-card .product-card-body .heartIT-btn-holder .heartIt .crossFadeImg .transparent {
  opacity: 0;
}

.product-card .product-card-body .product-desc {
  width: 100%;
}

.product-card .product-card-body .product-desc p {
  font-size: 0.875em;
  line-height: 18px;
}

.product-card .product-card-body .product-weight {
  padding-top: 15px;
  padding-bottom: 5px;
  position: absolute;
  bottom: 7px;
  right: 9px;
}

.product-card .product-card-body .product-weight .input-group {
  white-space: nowrap;
}

.product-card .product-card-body .product-weight .input-group .input-group-prepend .input-group-text,
.product-card .product-card-body .product-weight .input-group .input-group-append .input-group-text {
  display: none;
  border: none;
  background-color: transparent;
  color: #000000 !important;
  padding-left: 0;
}

.product-card .product-card-body .product-weight .input-group .input-group-prepend button,
.product-card .product-card-body .product-weight .input-group .input-group-append button {
  color: #000000 !important;
  background-color: #DEDEDE;
  border-radius: 60px;
  padding: 5px 0px;
  border: none;
  font-size: 1.25em;
}

.product-card .product-card-body .product-weight .input-group .input-group-prepend {
  display: none;
}

.product-card .product-card-body .product-weight .input-group .input-group-append .btn-increment .addToCart {
  content: url("https://w7.pngwing.com/pngs/1022/32/png-transparent-shopping-cart-icon-shopping-cart-logo-icon-shopping-cart-label-coffee-shop-shopping-mall.png");
  height: 16px;
  width: 16px;
}

.product-card .product-card-body .product-weight .input-group .form-control {
  display: none;
  padding-right: 6px;
  flex: unset;
  width: 60px;
  border: none;
  color: #000000 !important;
  background: transparent;
}

.product-card .product-card-body .product-price-box {
  padding-top: 0;
  position: absolute;
  top: 70px;
  right: 10px;
  width: 100%;
}

.product-card .product-card-body .product-price-box .product-price {
  font-size: 1.5em;
  text-align: right;
}

.product-card .product-card-body .product-price-box .product-price span {
  font-size: 0.675em;
}

.product-card .product-card-body .product-price-box .price-per-full-unit {
  margin-top: -5px;
  text-align: right;
  font-size: 0.75em;
  color: #797979;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://shaack.com/projekte/bootstrap-input-spinner/src/_bootstrap-input-spinner.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3 product-card-wrapper">
      <div class="product-card">
        <div class="row">
          <div class="col-12">
            <div class="product-card-image-wrapper">
              <a href="#" class="product-image-link">
                <div class="product-card-image"></div>
              </a>
              <div class="prodAmountBox"><span class="prodAmount valueOnChange hidden"></span> kg</div>
            </div>
          </div>
          <div class="col-12">
            <div class="product-card-body">
              <div class="product-heading">
                <h3><a href="#">File mignon</a></h3>
              </div>
              <div class="heartIT-btn-holder">
                <a href="#" class="heartIt">
                  <div class="crossFadeImg">
                    <img src="./assets/images/heart.svg" alt="" class="img-fluid bottom" />
                    <img src="./assets/images/heart_black.svg" alt="" class="img-fluid top transparent" />
                  </div>
                </a>
              </div>
              <div class="product-desc">
                <p class="m-0">Dry aged steak cca. 250g</p>
              </div>
              <div class="product-price-box">
                <div class="product-price">8,78<span> €/pc.</span></div>
                <div class="price-per-full-unit">Price per kg: 43.89 €</div>
              </div>
              <div class="product-weight">
                <input id="changedInput" data-name="Item One" data-price="8.78" type="number" value="" data-decimals="2" min="0" max="999" step="1" data-factor="0.50"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>