приращение OnClick счетчик для игры

Question

Привет я пытаюсь создать легкую игру, чтобы перейти на веб-сайт

Моя идея заключается в том, что есть пять красные буквы скрыты вокруг одной веб-страницы для людей, чтобы найти. Когда они нажимают на письмо, оно исчезает.

так что позволяет сказать, что есть 5 букв я хочу JQuery или JS считать, что они нашли пять букв и изменить отдельный DIV с формой в нем от «дисплея нет» на «дисплее блока»

этой это то, что я никогда до сих пор

я борюсь, чтобы заставить его считать «буквы», как они щелкают

   <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 s, no onclick) и прилагается lish it с помощью простой функции 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

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 3

Есть несколько ошибок в коде

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 4

Что-то вроде этого?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 5

Проблема ваша функция Java Script:

<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 6

Попробуйте изменить JavaScript для этого:

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

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

Это связывается с храповым случае элементов с классом красных письмами

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; 
        }