Как создать одно событие onclick для нескольких элементов div

Я все еще изучаю все это, но то, что я пытаюсь сделать сейчас, это создать игру Tic-Tac-Toe из HTML, CSS & Javascript. Однако независимо от того, что я пытаюсь, мои события onClick будут работать неправильно. Я просто хочу, чтобы игра отвечала на клик игрока, отправляла личность плитки, нажатой на функцию, чтобы она знала, какой из них нужно изменить, а затем измените изображение плитки (ни к чему, ни к кресту).Как создать одно событие onclick для нескольких элементов div

Я думаю, что лучший способ сделать это - передать onClick другой аргумент в зависимости от id плит, нажатых, но он говорит мне, что placeTile() не определен и, кроме того, должно быть проще чтобы сделать это, чем коктейль, который я задумал. Заранее спасибо за помощь! :)

HTML-:

<html> 
<head> 
    <title> Tic-Tac-Toe </title> 
    <link type='text/css' rel='stylesheet' href='Tic-Tac-Toe.css'/> 
    <script type='text/javascript' src='JQuery/jquery-1.11.1.js'></script> 
    <script type='text/javascript' src='Tic-Tac-Toe.js'></script> 
</head>  

<body> 
    <div id='game'> 
     <div id='container'> 
      <div id='board'> 
       <div class='emptyTile' id='NW' onClick='placeTile("NW")'></div> 
       <div class='emptyTile' id='N' onClick='placeTile("N")'></div> 
       <div class='emptyTile' id='NE' onClick='placeTile("NE")'></div> 
       <div class='emptyTile' id='W' onClick='placeTile("W")'></div> 
       <div class='emptyTile' id='C' onClick='placeTile("C")'></div> 
       <div class='emptyTile' id='E' onClick='placeTile("E")'></div> 
       <div class='emptyTile' id='SW' onClick='placeTile("SW")'></div> 
       <div class='emptyTile' id='S' onClick='placeTile("S")'></div> 
       <div class='emptyTile' id='SE' onClick='placeTile("SE")'></div> 
      </div> 
     </div> 

     <div id='scores'> 
      <div class='score' id='Score1'> Player 1: <br/> <span id='pOne' class='num'>0</span></div> 
      <div class='score' id='Score2'> Player 2: <br/> <span id='pTwo' class='num'>0</span></div> 
     </div> 
    </div> 
</body> 

</html>

Javascript Функция:

function placeTile(a){ 
    var tile = document.getElementById(a); 
    if (currentPlayer == 0) { 
     tile.removeClass('emptyTile'); 
     tile.addClass('cross'); 
     currentPlayer = 1; 
    } else { 
     tile.removeClass('emptyTile'); 
     tile.addClass('nought'); 
     currentPlayer = 0; 
    } 
}

Так как вы можете видеть, что я делаю это окольным путем, но событие OnClick должен пройти id div для функции, которая затем используется для внесения всех необходимых изменений в этот div, а также для замены текущего игрока. Но это очень грязно, и я уверен, что могу как-то его очистить, если бы мог просто выяснить, как заставить одну функцию javascript реагировать по-разному в зависимости от того, что нажал div ...

О, я люблю код, но я тоже Ненавижу это тоже. Это вызывает привыкание.

источник

2015-01-08 PolarBear084

Вы включили jQuery, поэтому используйте событие click в соответствии с этим JSFiddle.

http://jsfiddle.net/Delorian/3f2tvabo/

$('.emptyTile').click(function() { 
    if (currentPlayer == 0) { 
     $(this).removeClass('emptyTile'); 
     $(this).addClass('cross'); 
     currentPlayer = 1; 
    } else { 
     $(this).removeClass('emptyTile'); 
     $(this).addClass('nought'); 
     currentPlayer = 0; 
    }});

Вы ничего не на HTML-элементов нужно отдельно от класса, чтобы указать плитку.

источник

2015-01-08 03:38:43 Delorian

Да, я действительно пробовал только это, но по какой-то причине он не вызывал функцию, когда я пробовал это именно так. У меня был консольный журнал в первой строке, и я никогда не видел, чтобы это попало в консоль, поэтому я подумал, что по какой-то причине он не смог найти его ... – PolarBear084

В соответствии с Fiddle он должен работать нормально для вас , Попробуйте, и если у вас есть какие-либо вопросы, дайте мне знать. В противном случае отметьте этот ответ как правильный, если он сделает то, что вы хотите. – Delorian

Я посмотрел на Fiddle, и я думаю, что проблема может заключаться в том, что у меня есть Javascript в отдельном файле, в то время как скрипка действует так, как если бы скрипт был в самом файле HTML ... Я хочу попытаться разделить их еще так что я должен сделать событие click через DOM для этого? – PolarBear084

Вы можете взять свой второй блок js-кода, функцию Javascript и поместить его в другой класс. затем позвоните. Скажем, например, вы разместили ваш код в файл с именем onclick.js тогда вы будете называть его в таком виде:

<script type="text/javascript" src="onclick.js"></script>

и если вы поместили в папку, скажем, например, это называется MyFolder, то вы будете назовите это:

<script type="text/javascript" src="myFolder/onclick.js"></script>

Я надеюсь, что это поможет.

источник

2015-01-08 03:23:08 Ash23

Но это не было бы просто переместить вопрос в другой файл или папку? Я уже имею его в отдельном файле javascript, я думаю, я должен был упомянуть об этом заранее, извините. И когда вы говорите другой класс, что именно вы имеете в виду? Я не думал, что в Javascript есть классы? – PolarBear084

Во-первых, что делает placeTile действительно нужно? Поскольку он вызывается из события DOM, возникает мнение, что вам нужно дать ему строку в первую очередь. Например:

function placeTile(tile) { 
    tile.removeClass('emptyTile'); 
    tile.addClass(['nought', 'cross'][currentPlayer]); 
    currentPlayer = (currentPlayer + 1) % 2; 
}

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

Live: http://jsbin.com/rahaba/1/edit?js,output

var board = document.getElementById('board'); 
board.addEventListener('click', function(e) { 
    if (e.target === e.currentTarget) { 
    return; // This is the parent div, we only want the children 
    } 
    if (e.target.tagName === 'DIV') { 
    e.stopPropagation(); 
    placeTile(e.target); 
    } 
});

и JQuery:

// Notice the extra 'div' selector. 
$('#board').on('click', 'div', function() { 
    placeTile(this); 
});

источник

2015-01-08 03:49:44 Sukima

Я был в полусонном состоянии, когда я написал ответ извинения за ошибки кода, исправлено сейчас – Sukima

Как создать одно событие onclick для нескольких элементов div

ответ

Смежные вопросы