如何爲多個div元素創建單個onclick事件

我仍在學習通過所有這些東西的方式，但我現在想要做的是創建一個井字遊戲HTML，CSS & Javascript。但是，無論我嘗試我的onClick事件將無法正常運行。我只想讓遊戲響應玩家的點擊，將點擊的貼圖的身份發送到該函數，以便知道哪一個要更改，然後更改該貼圖的圖像（爲零或十字形）。如何爲多個div元素創建單個onclick事件

我在想這樣做的最好方法是讓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事件應該通過該div的id給函數，然後用於僅對該div進行所有必要的更改，並交換當前播放器。但它是非常混亂，我;我確信我可以清理它不知何故，如果我可以弄清楚如何使一個JavaScript函數作出不同的反應，取決於點擊什麼div ...

哦，我喜歡的代碼，但我也也討厭它。真的令人上癮。

來源

2015-01-08 PolarBear084

你已經包含了jQuery，所以使用這個JSFiddle的click事件。

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

按照小提琴，它應該適合你。試試吧，如果你有任何問題，請告訴我。否則，標記這個答案是正確的，如果它做你想要的。 – Delorian

我看了小提琴，我認爲這個問題可能是我有一個單獨的文件中的Javascript，而小提琴的行爲就像腳本是在HTML文件本身...我想盡量讓他們仍然分開所以我必須通過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屬性以獲取實際單擊的元素。

直播：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

如何爲多個div元素創建單個onclick事件

回答

相關問題