如果第二次单击按钮，如何减少计数器

Question

我有以下代码，每次点击一个按钮，它将它添加到计数器，如下图所示，我想要实现的是，如果第二次点击相同的按钮，它必须减少计数器，目前如果我多按一个按钮就会增加一个计数器，我只希望它在第一次点击时添加到计数器，第二次点击它必须递减计数器，我试图点击每个按钮一次如果它第二次点击它必须减少计数器

＆＃13;

＆＃13;

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}



$('body').on('click', '.btn', function(e) {
  counter++;
  count();
});

＆＃13;

.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

＆＃13;

＆＃13;

＆＃13;

和建议？

Answer 1

您可以在按钮中添加一些类来存储关于是应该增加计数器还是减少计数器的状态。

我正在添加课程increment来执行此操作。请参阅下面的代码......

＆＃13;

＆＃13;

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}



$('body').on('click', '.btn', function(e) {
  $(this).toggleClass("increment");
  
  if($(this).hasClass("increment"))
    counter++;
  else
    counter--;
    
  count();
});

＆＃13;

.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

实现此目的的最简单方法是在单击的按钮上切换一个类，然后显示具有给定类的按钮数的计数。另请注意，您的HTML无效，因为button元素中不能包含a元素。这是一个有效的例子：

＆＃13;

＆＃13;

$('body').on('click', '.btn', function(e) {
  $(this).toggleClass('active');
  $("#notify").html($('.btn.active').length);
});

＆＃13;

.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}
.active { color: #C00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <button class="btn">click me</button>
  <button class="btn">click me</button>
  <button class="btn">click me</button>
  <button class="btn">click me</button>
</div>

<span id="notify" class="notification"></span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不喜欢使用类来实现这一目标。类应仅用于将样式应用于元素。为此，我使用了数据，如下所示。

＆＃13;

＆＃13;

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}



$('body').on('click', '.btn', function(e) {
  $(this).data('increment',!$(this).data('increment'));
  
  if($(this).data('increment'))
    counter++;
  else
    counter--;
    
  count();
});

＆＃13;

.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我使用了绑定到单击的特定元素的自定义键_clickCount。 通过简单的modulu检查% 2，您可以检查是否第一次或第二次点击它。

＆＃13;

＆＃13;

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}

$('body .btn').on('click', function(e) {
  if (this._clickCount) {
    this._clickCount++;
  } else {
    this._clickCount = 1;
  };
  
  if (this._clickCount % 2 == 0) {
    counter--;
  } else {
    counter++;
  }
  console.log(this._clickCount);
  count();
});

＆＃13;

.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>

＆＃13;

＆＃13;

＆＃13;

  

注意：

     

您不必将按钮类.btn作为第二个参数传递给   on()因为它们不是动态添加的。您只需在选择器$('body .btn')

中添加它们即可

Answer 5

你可以添加额外的类并检查这样的类。

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}

$('body').on('click', '.btn', function(e) {
  if ($(this).hasClass('click')) {
    $(this).removeClass('click');
    counter--;
    count();
  } else {
    counter++;
    $(this).addClass('click');
    count();
  }
  //console.log(counter);
});

.notification {
  position: absolute;
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -1px;
  width: auto;
  min-width: 8px;
  height: 9px;
  line-height: 4px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px 1px 5px #000;
  border: 2px solid #fff;
  background-color: #b60000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="marketoptionslist">
  <a><button  class="btn" >
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button ></a>
  <a><button class="btn">
  click me
  </button></a>
  <a><button class="btn">
  click me
  </button></a>
</div>

<span id="notify" class="notification"></span>