单击元素时如何添加和删除类

Question

如果不使用JQUERY，我需要能够更改表中div的css类。以下链接将显示表格https://jsfiddle.net/7gwktgxz/

的外观

我需要能够单击一个空格，它会删除该类的最后一个元素，并添加一个新元素。我需要能够获得div的id并更改div的类（或类似的东西）

这是HTML

<table class="othello-board" cellspacing="0">
        <tr class="base white">
            <th colspan="8">
                <div class="base-pieces-wrapper">
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                </div>
            </th>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-1-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-5"> </div> </td>
            <td> <div class="othello-piece white" id="tile-1-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-2-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-4"> </div> </td>
            <td> <div class="othello-piece white" id="tile-2-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-3-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-3"> </div> </td>
            <td> <div class="othello-piece white" id="tile-3-4"> </div> </td>
            <td> <div class="othello-piece black" id="tile-3-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-4-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-4-2"> </div> </td>
            <td> <div class="othello-piece white" id="tile-4-3"> </div> </td>
            <td> <div class="othello-piece white" id="tile-4-4"> </div> </td>
            <td> <div class="othello-piece black" id="tile-4-5"> </div> </td>
            <td> <div class="othello-piece black" id="tile-4-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-4-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-4-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-5-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-5-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-5-3"> </div> </td>
            <td> <div class="othello-piece black" id="tile-5-4"> </div> </td>
            <td> <div class="othello-piece white" id="tile-5-5"> </div> </td>
            <td> <div class="othello-piece black" id="tile-5-6"> </div> </td>
            <td> <div class="othello-piece black" id="tile-5-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-5-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-6-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-5"> </div> </td>
            <td> <div class="othello-piece black" id="tile-6-6"> </div> </td>
            <td> <div class="othello-piece black" id="tile-6-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-7-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-8-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-8"> </div> </td>
        </tr>
        <tr class="base black">
            <th colspan="8">
                <div class="base-pieces-wrapper">
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                </div>
            </th>
        </tr>
    </table>

Answer 1

您可以设置元素的className属性：

document.getElementById('idOfTheDiv').className = "desiredClassName";

或者您可以使用元素classList添加或删除类：

document.getElementById('idOfTheDiv').classList.remove('doNotWantThisClass');
document.getElementById('idOfTheDiv').classList.add('desiredClassName');

Answer 2

我会使用replace()和事件委托。这是一个起点：

var board = document.getElementById('board');

board.addEventListener('click', function (ev) {
  if (ev.target.parentNode.id == 'board') {
    var cls = ev.target.getAttribute('class');
    ev.target.setAttribute('class', swap(cls));
  }
});

function swap (cls) {
  return cls.replace(/\b(white|black)\b/, function ($0, $1) {
    return $1 == 'white' ? 'black' : 'white';
  });
}

#board { width: 150px; }
.white { background: white; }
.black { background: black; }

.piece { 
  float: left;
  width: 43px; 
  height: 43px; 
  border: 1px solid black; 
  margin: 0 5px 5px 0;
  border-radius: 50%;
}

<div id="board">
  <div class="piece white"></div
  ><div class="piece white"></div
  ><div class="piece white"></div
  ><div class="piece white"></div
  ><div class="piece black"></div
  ><div class="piece black"></div
  ><div class="piece black"></div
  ><div class="piece white"></div
  ><div class="piece white"></div>
</div>

Answer 3

这里有一些让你入门的东西，将其与 Pabs123 的答案相结合，你应该能够弄明白。使用querySelectorAll()方法和addEventListener()，您可以向div元素添加点击事件，从而允许少量代码处理所有内容。

window.onload = function() {
    var divs = document.querySelectorAll('.othello-piece');
    for(var i = 0, len = divs.length; i < len; i++) {
        var div = divs[i];
        div.addEventListener('click', function(e){
            e = e || event;
            var elem = e.target;
            var id = elem.id;
            var classes = elem.classList;
            console.log(classes);
        }, false);
    }
};

当然，你可能想在那里放一些支票（比如divs变量有length等），你可以删除日志，它只是向你展示它作品。此外，here's a fiddle正在行动中。