FIDDLE

Question

您好我想创建一个简单的游戏去网站

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

所以假设有5个字母，我希望jquery或js计算他们已经找到了五个字母并用＃34;显示无＆＃34;中的表格更改了单独的div。到＆＃34;显示块＆＃34;

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

我正在努力让它来计算这些字母＆＃39;点击它们

                <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

Answer 2

尝试将您的javascript更改为：

var count = 0;
var redLetter = $('.red-Letter');
var display = document.getElementById("displayCount");

redLetter.on("click", function(){
    count++;
    display.innerHTML = count;
});

这会绑定带有红色字母

的元素的click事件

Answer 3

fiddle

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="hideaway1" href="#" class="red-Letter">red letter 1</a>
<a id="hideaway2" href="#" class="red-Letter">red letter 2</a>
<a id="hideaway3" href="#" class="red-Letter">red letter 3</a>
<a id="hideaway4" href="#" class="red-Letter">red letter 4</a>
<a id="hideaway5" href="#" class="red-Letter">red letter 5</a>
<p>The red letters was pressed <span id="displayCount">0</span> times.</p>

<script>

$(function() {
  var count = 0,
  redLetter = $('.red-Letter'),
  display = $("#displayCount");

  redLetter.on('click', function(){
    $(this).hide();
    count++;
    display.text(count);
  });
});
</script>

Answer 4

代码中有一些错误

var redLetter = $('.red-Letter').attr('class');
// this gives you the class, try
var redLetter = $('.red-Letter');

var display = document.getElementById("displayCount");
// your using jquery, mayas well use it, try
var display = $('#displayCount');

redLetter.onclick = function(){
// again with jquery try
redLetter.on('click', function(){

Answer 5

这样的东西？ http://jsfiddle.net/swm53ran/85/

<a id="hideaway1" class="red-Letter" href="#">red letter 1</a>
<a id="hideaway2" class="red-Letter" href="#">red letter 2</a>

$(document).ready(function() {
    var count = 0;

    $('.red-Letter').on('click', function() {
        count++;
        $("#displayCount").text(count);
        $(this).hide();
    });
});

Answer 6

问题是你的java脚本函数：

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

<强> //This is wrong - it just return class Name - a value not a Jquery Object

 var display = document.getElementById("displayCount"); **`// you can use jQuery`**

                      **redLetter.onclick = function(){
                        count++;
                        display.innerHTML = count;
                      }**

上面什么都不做

Use : $('.red-Letter').on('click',function(){
             count++;
             display.innerHTML = count;

});
                    </script>

您应该将计数存储在隐藏的输入变量//

中

<input id="count" type="hidden" value="0"/> //Makes it easy to retain state.

Answer 7

$(document).on('click', '.red-Letter', function() {
  var that = $(this);
  var counterSpan = $('#displayCount'); 
  var counter = counterSpan.html();
  counterSpan.html(parseInt(counter) + 1);
  $(this).hide();
});

.red-Letter {
  padding: 10px;
  background-color: #333;
  color: red;
  display: inline-block;
  float: left;
  margin: 5px;
}
p {
  width: 100%;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <a id="hideaway2" class="red-Letter" href="#" >red letter 1</a>
                <a id="hideaway2" class="red-Letter" href="#" >red letter 2</a>
                <a id="hideaway2" class="red-Letter" href="#" >red letter 3</a>
                <a id="hideaway2" class="red-Letter" href="#" >red letter 4</a>
                <a id="hideaway2" class="red-Letter" href="#" >red letter 5</a>

                <p>The red letters was pressed <span id="displayCount">0</span> times.</p>

Answer 8

以下是jQuery的一个工作示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="hideaway1" class="red-Letter" href="#">red letter 1</a>
<a id="hideaway2" class="red-Letter" href="#">red letter 2</a>
<a id="hideaway3" class="red-Letter" href="#">red letter 3</a>
<a id="hideaway4" class="red-Letter" href="#">red letter 4</a>
<a id="hideaway5" class="red-Letter" href="#">red letter 5</a>

<p>The red letters was pressed <span id="displayCount">0</span> times.</p>

<script type="text/javascript">
  $(function() {
    var count = 0;

    $('body').on('click', '.red-Letter', clickedLetter);

    function clickedLetter(event) {
      event.preventDefault();
      event.currentTarget.style.display = 'none';
      count += 1;
      $('#displayCount').text(count);
    }
  });
</script>

Answer 9

您所要做的就是创建一个包含计数值的对象，并使用一种方法将对象中的计数增加一。在事件处理程序中调用该方法。

var redLetter = $('.red-Letter').attr('class');
var display = document.getElementById("displayCount");

// Make a separate object so that you don't clutter the global namespace
var counter = {
    count: 0,
};
counter.inc = function(){
    this.count++;
};

redLetter.onclick = function(){
                    counter.inc();
                    display.innerHTML = counter.count;
                  }

为游戏增加onclick计数器

9 个答案:

FIDDLE