javascript - 增加游戏的 onclick 计数器

Question

嗨，我正在尝试创建一个可以在网站上运行的简单游戏

我的想法是在一个网页周围隐藏五个红色字母供人们查找。当他们点击一个字母时，它就会消失。

假设有 5 个字母，我希望 jquery 或 js 计算它们找到了 5 个字母，并将其中包含表单的单独 div 从“不显示”更改为“显示 block ”

这就是我到目前为止所拥有的

我正在努力让它在点击“字母”时计算它们

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

                <a id="hideaway1" class="red-Letter" href="javascript:;" onClick="document.getElementById('hideaway1').style.display='none';">red letter 1</a>
                <a id="hideaway2" class="red-Letter" href="javascript:;" onClick="document.getElementById('hideaway2').style.display='none';">red letter 2</a>
                <a id="hideaway3" class="red-Letter" href="javascript:;" onClick="document.getElementById('hideaway3').style.display='none';">red letter 3</a>
                <a id="hideaway4" class="red-Letter" href="javascript:;" onClick="document.getElementById('hideaway4').style.display='none';">red letter 4</a>
                <a id="hideaway5" class="red-Letter" href="javascript:;" onClick="document.getElementById('hideaway5').style.display='none';">red letter 5</a>

                <p>The red letters was pressed <span id="displayCount">0</span> times.</p>

                <script type="text/javascript">
                      var count = 0;
                      var redLetter = $('.red-Letter').attr('class');
                      var display = document.getElementById("displayCount");

                      redLetter.onclick = function(){
                        count++;
                        display.innerHTML = count;
                      }
                </script>

Answer 1

如果您要使用 jQuery，您可以真正清理它(没有 id，没有 onclick)，并通过简单的 click 来完成它() 函数，将 $(this) 设置为 .hide() 并递增变量。无需混合使用纯 JS 和 jQuery:

JS

var counter = 0;

$(".red-Letter").click(function(e){
  e.preventDefault();
  $(this).hide();
  counter++;
  $("#displayCount").html(counter); //you could use .text() but incase you ever wanted to add other elements, doesn't hurt to already be using .html()
});

HTML

<a href="#" class="red-Letter">red letter 1</a>
<a href="#" class="red-Letter">red letter 2</a>
<a href="#" class="red-Letter">red letter 3</a>
<a href="#" class="red-Letter">red letter 4</a>
<a href="#" class="red-Letter">red letter 5</a>

<p>The red letters was pressed <span id="displayCount">0</span> times.</p>

FIDDLE