主页 / 问题 / 1009151
Accepted
Antonio112009
Asked:2020-08-02 00:02:53 +0800 CST2020-08-02 00:02:53 +0800 CST

jQuery检测按钮点击

  • 772

对JS中代码的实现感兴趣。当您单击增加/减少按钮时，此按钮旁边的文本必须更改。我使用 id 制作了一个变体，但这适用于单个应用程序。如何为多个按钮做到这一点？

Codepen 上的代码： https ://codepen.io/anon/pen/wVqapG

JS代码：

var $span = $('#input');

  //increase
  $('#product-button-increase').click(function () {
    if (Number($span.text()) === 100) {
      return;
    }
    $span.text(Number($span.text()) + 1);
  });

  //decrease
  $('#product-button-decrease').click(function () {
    if (Number($span.text()) === 1) {
      return;
    }
    $span.text(Number($span.text()) - 1);
  });


var $span = $('#input');

  //increase
  $('#product-button-increase').click(function () {
    if (Number($span.text()) === 100) {
      return;
    }
    $span.text(Number($span.text()) + 1);
  });

  //decrease
  $('#product-button-decrease').click(function () {
    if (Number($span.text()) === 1) {
      return;
    }
    $span.text(Number($span.text()) - 1);
  });
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.product-to-basket {
  width: 90px;
  height: 26px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 36px;
  border: 1px solid #f79a3d;
}
.product-to-basket > .ptb-button {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  background-color: #f79a3d;
  border-radius: 36px;
  border: none;
}
.product-to-basket > .ptb-button > span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.product-to-basket > span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Roboto', sans-serif;
  line-height: 14px;
  font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="product-to-basket">
  <div class="ptb-button" id="product-button-decrease">
    <span>-</span>
  </div>
  <span id="input">1</span>
  <div class="ptb-button" id="product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button" id="product-button-decrease">
    <span>-</span>
  </div>
  <span id="input">1</span>
  <div class="ptb-button" id="product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button" id="product-button-decrease">
    <span>-</span>
  </div>
  <span id="input">1</span>
  <div class="ptb-button" id="product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button" id="product-button-decrease">
    <span>-</span>
  </div>
  <span id="input">1</span>
  <div class="ptb-button" id="product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button" id="product-button-decrease">
    <span>-</span>
  </div>
  <span id="input">1</span>
  <div class="ptb-button" id="product-button-increase">
    <span>+</span>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    您应该使用类而不是需要以某种方式与您的 js 代码相关联的 id 或唯一 id。

    修复了CodePen中的代码

    具体来说，您的示例可以使用以下代码解决，但请记住，我将 id 更改为 classes

    var $plus = $('.product-button-increase'),
    $minus = $('.product-button-decrease');

$plus.on('click', function () {
   var $button = $(this),
       $quantity = $button.siblings('.quantity'),
       $quantityValue = Number($quantity.text());
    
    if ($quantityValue === 100) {
      return;
    }
  
    $quantity.text($quantityValue + 1);
});

$minus.on('click', function () {
   var $button = $(this),
       $quantity = $button.siblings('.quantity'),
       $quantityValue = Number($quantity.text());
  
    if ($quantityValue === 100) {
      return;
    }
  
    $quantity.text($quantityValue - 1);
});
    $width_icon: 26px;
$border_radius_button_round: 36px;
$color_orange: #F79A3D;
$border_line_orange: 1px solid $color_orange;
$font_size_button_small: 14px;

  @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

@mixin font-roboto-regular {
  font-family: 'Roboto', sans-serif;
}

//flex
@mixin flex($align, $justify, $direction){
  display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
  display: -moz-box;    // OLD - Firefox 19- (buggy but mostly works)
  display: -ms-flexbox;  // TWEENER - IE 10
  display: -webkit-flex; // NEW - Chrome
  display: flex;
  @if $direction != "null" {
    -webkit-box-align: $align;
    -ms-flex-align: $align;
    -webkit-align-items: $align;
    align-items: $align;
  }
  @if $direction != "null"{
    justify-content: $justify;
  }
  @if $direction != "null" {
    flex-direction: $direction;
  }
}

.product-to-basket{
  width: 90px;
  height: $width_icon;
  @include flex(center, space-between, row);
  margin-bottom: 15px;

  background-color: #fff;
  border-radius: $border_radius_button_round;
  border: $border_line_orange;

  & > .ptb-button{
    cursor: pointer;
    width: $width_icon + 2px;
    height: $width_icon + 2px;

    @include flex(center, center, null);

    background-color: $color_orange;
    border-radius: $border_radius_button_round;
    border: none;
   

    & > span{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      // width: 50%;
    }
  }


  & > span{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    @include font-roboto-regular;

    line-height: $font_size_button_small;
    font-size: $font_size_button_small;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-to-basket">
  <div class="ptb-button product-button-decrease">
    <span>-</span>
  </div>
  <span class="quantity">1</span>
  <div class="ptb-button product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button product-button-decrease">
    <span>-</span>
  </div>
  <span class="quantity">1</span>
  <div class="ptb-button product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button product-button-decrease">
    <span>-</span>
  </div>
  <span class="quantity">1</span>
  <div class="ptb-button product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button product-button-decrease">
    <span>-</span>
  </div>
  <span class="quantity">1</span>
  <div class="ptb-button product-button-increase">
    <span>+</span>
  </div>
</div>

<div class="product-to-basket">
  <div class="ptb-button product-button-decrease">
    <span>-</span>
  </div>
  <span class="quantity">1</span>
  <div class="ptb-button product-button-increase">
    <span>+</span>
  </div>
</div>

    • 2

相关问题