Question

我有一个计数器，如果第一次点击一个按钮就会计数，如果它第二次点击它会减少计数器，我想要实现的是，如果我点击页面上的另一个按钮，它必须重置我的反击回原来的状态意味着它应该从第一次点击开始。

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
  if ($('#reset').click(function () {
    
        $('#notify').removeClass("notification");
        $("#notify").empty();
       
        counter = 0;
               
            }));
}



$('body').on('click', '.btn', function(e) {
  $(this).data('increment', !$(this).data('increment'));
       
        if ($(this).data('increment'))
            counter++;
        else
            counter--;
        
        count();
});

.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" ></span>
</br>
</br>
<button id="reset"> Reset Counter</button>

如上所示，如果我单击“单击我”按钮，它将添加到计数器，如果我先单击所有4按钮然后再单击其中一个“单击我”按钮第二次它会将计数器减少到3，现在当我点击重置按钮然后点击“点击我”它显示-1时，我正在尝试重置计数器，以便从重置时重新开始，任何建议？

Answer 1

当您单击重置时，您希望将所有按钮的数据变量重置为true，这意味着它们将在下次单击时递增。因此，请在重置代码中添加：

$(this).data('increment', true);

目前他们只是简单地保留他们之前的状态，因此如果他们最后一次递增就减少计数。

编辑：试试这个，它为我工作。

<html>

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var counter = 0;
        $(document).ready(function() {
        function count() {
            $('#notify').addClass("notification");
            $("#notify").html(counter);
            if ($('#reset').click(function () {
                $('.btn').attr('data', true);
            $('#notify').removeClass("notification");
                        $("#notify").empty();
                    counter=0; // i tried to reset the counter here but it doesnt work

                    }));
        }



        $('.btn').click(function(e) {
            if ($(this).attr('data') == 'true') {
                counter++;
                $(this).attr('data', false);
            } else {
                counter--;
                $(this).attr('data', true);
            }
            //$(this).end();
            count();
        });
    });
    </script>
    <style>
        .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;
        }
    </style>

</head>
<body>
  <div class="marketoptionslist">
     <a><button class="btn" data=true>
        click me
    </button></a>
    <a><button class="btn" data=true>
    click me
    </button ></a>
    <a><button class="btn" data=true>
      click me
     </button></a>
    <a><button class="btn" data=true>
      click me
    </button></a>
 </div>

 <span id="notify" ></span>
</br>
</br>
<button id="reset"> Reset Counter</button>
</body>
</html>

请注意，我使用下面答案中提到的attr（）方法。

Answer 2

以这种方式设置数据属性实际上不会将data-increment放到按钮上，您必须使用attr()方法，否则$(this).data('increment')将不知道它。此外，您不必使用if语句进行事件处理，也不需要在函数中。 <br/>最后应该有/而不是开头。请参阅下面的工作代码：

var counter = 0;

function count() {
  $('#notify').addClass("notification");
  $("#notify").html(counter);
}

$('#reset').click(function() {
  $('#notify').removeClass("notification");
  $("#notify").empty();
  $('.btn').attr('data-increment', 'increment');
  counter = 0; // i tried to reset the counter here but it doesnt work
});

$('body').on('click', '.btn', function(e) {
  if ($(this).attr('data-increment') == 'increment') {
    counter++;
  } else {
    counter--;
  }
  $(this).attr('data-increment', $(this).attr('data-increment') == 'increment' ? 'decrement' : 'increment');
  count();
});

.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" data-increment='increment'>
  click me
  </button></a>
  <a><button class="btn" data-increment='increment'>
  click me
  </button ></a>
  <a><button class="btn" data-increment='increment'>
  click me
  </button></a>
  <a><button class="btn" data-increment='increment'>
  click me
  </button></a>
</div>

<span id="notify"></span>
<br/>
<br/>
<button id="reset"> Reset Counter</button>

如果点击按钮，如何重置计数器

2 个答案: