1

Пытался сделать кнопки на сайте для увеличения числа + - , но у меня есть проблема. При нажатии на одну кнопку, увеличиваются все сразу

<div class="qty mt-5">
 <span class="minus bg-dark">-</span>
<input type="number" class="count" name="qty" value="1">
<span class="plus bg-dark">+</span>
</div>


<div class="qty1 mt-5">
 <span class="minus bg-dark">-</span>
<input type="number" class="count" name="qty" value="1">
<span class="plus bg-dark">+</span>
</div>

<div class="qty2 mt-5">
 <span class="minus bg-dark">-</span>
<input type="number" class="count" name="qty" value="1">
<span class="plus bg-dark">+</span>
</div>

<div class="qty3 mt-5">
 <span class="minus bg-dark">-</span>
<input type="number" class="count" name="qty" value="1">
<span class="plus bg-dark">+</span>
</div>

введите сюда описание изображения

        $(document).ready(function(){
            $('.count').prop('disabled', true);
            $(document).on('click','.plus',function(){
                $('.count').val(parseInt($('.count').val()) + 1 );
            });
            $(document).on('click','.minus',function(){
                $('.count').val(parseInt($('.count').val()) - 1 );
                    if ($('.count').val() == 0) {
                        $('.count').val(1);
                    }
                });
        });
.qty .count {
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px
    ;min-width: 35px;
    text-align: center;
}
.qty .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    }
.qty .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
}
div {
    text-align: center;
}
.minus:hover{
    background-color: #717fe0 !important;
}
.plus:hover{
    background-color: #717fe0 !important;
}

span{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
input{  
    border: 0;
    width: 2%;
}
nput::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:disabled{
    background-color:yellow;
}

.qty{
    position: absolute;
    top:1425px;
    left:300px;
}


.qty1{
    position: absolute;
    top:1425px;
    left:600px;
}

.qty2{
    position: absolute;
    top:1230px;
    left:600px;
}


.qty3{
    position: absolute;
    top:1230px;
    left:300px;
}



.qty1 .count {
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px
    ;min-width: 35px;
    text-align: center;
}
.qty1 .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    }
.qty1 .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
}

.qty2 .count {
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px
    ;min-width: 35px;
    text-align: center;
}
.qty2 .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    }
.qty2 .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
}

.qty3 .count {
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    padding: 0 2px
    ;min-width: 35px;
    text-align: center;
}
.qty3 .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    }
.qty3 .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: green;
    width: 30px;
    height: 30px;
    font: 30px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
}

1 ответ 1

1

$(document).ready(function() {
  $('.count').prop('disabled', true);
  $(document).on('click', '.plus', function() {
    var all_count = 0;
    $('.count').each(function() {
      all_count += parseInt($(this).val());
    });
    if (all_count >= 4) {
      alert('Мах кол-во');
    } else {
      $(this).parent().find('.count').val(parseInt($(this).parent().find('.count').val()) + 1);
    }
  });
  $(document).on('click', '.minus', function() {
    $(this).parent().find('.count').val(parseInt($(this).parent().find('.count').val()) - 1);
    if ($(this).parent().find('.count').val() == 0) {
      $(this).parent().find('.count').val(1);
    }
  });
});
.qty .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}

.qty .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
}

.qty .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}

div {
  text-align: center;
}

.minus:hover {
  background-color: #717fe0 !important;
}

.plus:hover {
  background-color: #717fe0 !important;
}

span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input {
  border: 0;
  width: 2%;
}

nput::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:disabled {
  background-color: yellow;
}

.qty {
  position: absolute;
  top: 1425px;
  left: 300px;
}

.qty1 {
  position: absolute;
  top: 1425px;
  left: 600px;
}

.qty2 {
  position: absolute;
  top: 1230px;
  left: 600px;
}

.qty3 {
  position: absolute;
  top: 1230px;
  left: 300px;
}

.qty1 .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}

.qty1 .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
}

.qty1 .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}

.qty2 .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}

.qty2 .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
}

.qty2 .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}

.qty3 .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}

.qty3 .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
}

.qty3 .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: green;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qty mt-5">
  <span class="minus bg-dark">-</span>
  <input type="number" class="count" name="qty" value="1">
  <span class="plus bg-dark">+</span>
</div>


<div class="qty1 mt-5">
  <span class="minus bg-dark">-</span>
  <input type="number" class="count" name="qty" value="1">
  <span class="plus bg-dark">+</span>
</div>

<div class="qty2 mt-5">
  <span class="minus bg-dark">-</span>
  <input type="number" class="count" name="qty" value="1">
  <span class="plus bg-dark">+</span>
</div>

<div class="qty3 mt-5">
  <span class="minus bg-dark">-</span>
  <input type="number" class="count" name="qty" value="1">
  <span class="plus bg-dark">+</span>
</div>

5
  • БОЛЬШОЕ СПАСИБО!
    – TR00P3R
    14 мар 2019 в 12:11
  • А не знаете как сделать, чтобы в сумме при нажатии на всех было не более 4 ? Ну например, 2 в одном 2 в другом.
    – TR00P3R
    14 мар 2019 в 12:14
  • @TR00P3R, заводите счетчик и при клике на элемент добавляете счетчику +1, если счетчик >= 4, то делаете что-нибудь
    – meine
    14 мар 2019 в 12:19
  • @TR00P3R подправил ответ,
    – nicolaa
    14 мар 2019 в 12:22
  • Большущее спасибо) Вы решили проблему 2х студентов на практике :)
    – TR00P3R
    14 мар 2019 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.