在JavaScript中更改未知元素的樣式

-2

我正在嘗試構建一個井字遊戲，用戶首先點擊哪個玩家他想成爲玩家，然後點擊他想玩的棋盤上的廣場。我遇到的問題是更改用戶點擊的方塊的背景。因爲我不知道用戶點擊哪個方塊，所以我無法弄清楚如何改變背景的風格，因爲廣場的id/class是未知的。在JavaScript中更改未知元素的樣式

我不能說：

document.getElementById("randomId").style.backg round

，因爲我不知道用戶會點擊該廣場。下面的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Tic-Tac-Toe Game</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    <style type="text/css"> 
     #buttons{ 
      margin-top: 50px; 
     } 
     #x{ 
      margin-left: 10px; 
     } 
     #table{ 
      margin-top: 15px; 
      background: gray; 
      table-layout: fixed; 
      width: auto; 
      width: 250px; 
      height: 250px; 
     } 
    </style> 
</head> 
<body> 
<div class="container" id="buttons"> 
    <h2 id="h2">Choose your team!</h2> 
    <button onclick="myFunctions()" type="button" class="btn btn-default"><span 
      style="font-weight: bold; font-size: 110%;">O</span></button> 
    <button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> 
    </button> 

    <table id="table" class="table table-bordered"> 
     <tbody> 
     <tr> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
     </tr> 
     <tr> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
     </tr> 
     <tr> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

<script type="text/javascript"> 
    var master = false; 
    var servant = false; 

    function myFunctions(){ 
     master = true; 

    } 
    function myFunction() { 
     if (master == true) { 

     } 
    } 
</script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body> 
</html>

來源

2015-09-28 Aaronpd1

你爲什麼要使用JavaScript，而不是jQuery的任何原因？我只問這是因爲boostrap的js需要jquery反正 – indubitablee

- >傳遞DOM元素的功能，這應該有幫助... – sinisake

是的，我只是想練習我的JavaScript。我在該函數的定義中加入了什麼？ this.style.background？ – Aaronpd1

嗯，你既可以像這樣做，你當你調用函數中添加參數，在這種情況下，this關鍵字將指向的HTML元素（TD）。

通過添加一個css類，您可以相對容易地處理這些更改並檢查它之前是否未點擊過。

var master = true; 
 

 
// clickedElement = your dom element you want to update 
 
function myFunction(clickedElement) { 
 
    // if a dom element was given and it doesn't have a className yet 
 
    if (clickedElement && !clickedElement.className) { 
 
    // set a class on the element 
 
    clickedElement.className = master ? 'master' : 'servant'; 
 

 
    // change the player (if it's not a master it's a servant) 
 
    master = !master; 
 
    } 
 
}

#buttons { 
 
    margin-top: 50px; 
 
} 
 
#x { 
 
    margin-left: 10px; 
 
} 
 
#table { 
 
    margin-top: 15px; 
 
    background: gray; 
 
    table-layout: fixed; 
 
    width: auto; 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 
.master { 
 
    background-color: green; 
 
} 
 
.servant { 
 
    background-color: red; 
 
}

<div class="container" id="buttons"> 
 
    <h2 id="h2">Choose your team!</h2> 
 
    <button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span> 
 
    </button> 
 
    <button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> 
 
    </button> 
 

 
    <table id="table" class="table table-bordered"> 
 
    <tbody> 
 
     <tr> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     </tr> 
 
     <tr> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     </tr> 
 
     <tr> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 

 
</div>

當然還有沒有理由只此信息存儲在DOM，你仍必須評估是否有相同顏色的3個小區。您可能希望選擇保留一個數據結構，用於檢查哪個塊被點擊以及誰點擊了它，以及對於剛點擊的人是否對角地，垂直或水平地排列3。

，如果你想要更多的靈感，你可以檢查此jsfiddle

來源

2015-09-28 21:23:14 Icepickle

在JavaScript中更改未知元素的樣式

回答

相關問題