我有一个计数器，如果按钮被第一次点击，它就会计数，如果它第二次被点击，它就会递减计数器，我想要实现的是，如果我点击页面上的另一个按钮，它必须重置我的返回到其原始状态，这意味着它应该从第一次点击开始。
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，我正在尝试重置计数器以便它从重置时重新开始，有什么建议吗？
最佳答案
当您单击重置时，您希望将所有按钮的数据变量重置为 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() 方法。
关于javascript - 如果单击按钮，如何重置计数器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48802437/