Javascript 禁用和启用具有计数器和过渡效果的单击事件

我的网页中有以下代码行-

HTML:

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>

<p id="answer" class="answer-display-hidden">answer</p>

<div class="incorrect">
    <span>Incorrect:</span>
    <p>0</p>
</div>

<div class="correct">
    <span>Correct:</span>
    <p>0</p>
</div>

.answer-display-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}

.answer-display-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.incorrect, .correct {float: left; padding-right: 20px}

var incorrectCalls = 0;
var correctCalls = 0;

function showResult(b) {
  var res = document.getElementById('answer');

  if (b.classList.contains('right-answer')) {
    res.innerHTML = '<span class="right">right</span>';

    correctCalls++;
        var cor = $('.correct > p:first');
        cor[0].innerHTML = correctCalls;
  } 

  else {
    res.innerHTML = '<span class="wrong">wrong</span>';

    incorrectCalls++;
    var incor = $('.incorrect > p:first');
    incor[0].innerHTML = incorrectCalls;
  }

  res.classList.remove("answer-display-hidden");
  res.classList.add("answer-display-visible");

  setTimeout(function() {
        res.classList.add("answer-display-hidden");
  }, 2000);
}

JS:

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>

<p id="answer" class="answer-display-hidden">answer</p>

<div class="incorrect">
    <span>Incorrect:</span>
    <p>0</p>
</div>

<div class="correct">
    <span>Correct:</span>
    <p>0</p>
</div>

.answer-display-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}

.answer-display-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.incorrect, .correct {float: left; padding-right: 20px}

var incorrectCalls = 0;
var correctCalls = 0;

function showResult(b) {
  var res = document.getElementById('answer');

  if (b.classList.contains('right-answer')) {
    res.innerHTML = '<span class="right">right</span>';

    correctCalls++;
        var cor = $('.correct > p:first');
        cor[0].innerHTML = correctCalls;
  } 

  else {
    res.innerHTML = '<span class="wrong">wrong</span>';

    incorrectCalls++;
    var incor = $('.incorrect > p:first');
    incor[0].innerHTML = incorrectCalls;
  }

  res.classList.remove("answer-display-hidden");
  res.classList.add("answer-display-visible");

  setTimeout(function() {
        res.classList.add("answer-display-hidden");
  }, 2000);
}

var incorrectCalls=0；
var=0；
函数显示结果（b）{
var res=document.getElementById（'answer'）；
if（b.classList.contains（'right-answer'））{
res.innerHTML='右'；
正确调用++；
var cor=$（'.correct>p:first'）；
cor[0]。innerHTML=correctCalls；
} 
否则{
res.innerHTML='错误'；
错误调用++；
var incor=$（'不正确>p:first'）；
incor[0]。innerHTML=incorrectCalls；
}
res.classList.remove（“答案显示隐藏”）；
res.classList.add（“答案显示可见”）；
setTimeout（函数（）{
res.classList.add（“答案显示隐藏”）；
}, 2000);
}

在文本的淡入和等待效果期间，如何取消激活

右答案

计数器，然后重新激活？这是因为用户无法操作计数器（在显示文本之前快速单击按钮）。

这是我的解决方案

删除了CSS代码，下面是jQuery代码

$(document).ready(function(){

    $(".wrong-answer").click(function(){
        $(".right-answer").attr("disabled","disabled");
        $("#answer").text("WRONG").fadeIn(5000,function(){

            $(this).fadeOut(5000,function(){
                $(".right-answer").removeAttr("disabled");
            });
        })

    });

});

---

单击按钮时，可以使用设置超时功能

代码块：

function showResult(b) {
 .
 .
 .
  $(".right-answer").prop("disabled", true);
  $(".wrong-answer").prop("disabled", true);
  setTimeout(function() {
    $(".right-answer").prop("disabled", false);
    $(".wrong-answer").prop("disabled", false);
  }, 2600);
}

---

在答案出现和消失所需的几秒钟内，您是否尝试将属性

disabled

添加到按钮中。我对JS的了解太少，不知道在哪里添加它，但您可能能够找到它。我认为您必须使用

setAttribute（“disabled”）和
删除属性（“禁用”）能否将计数器包括在解决方案中？使用此小提琴更新了代码。您也可以使用“右键回答”按钮。如果我尽可能快地选择该按钮，计数器会统计每次单击该按钮的次数。但是，我正在寻找一种解决方案，在转换效果期间，计数器不会对文本计数。例如，如果您快速选择按钮，计数器将对第一次单击进行计数，然后停止，直到文本淡出后才重新开始。