Question

我有这个HTML：table>tr*3>td*5。某些标记<td>具有类'some' 所以jQuery代码是：

$('td').click(function(){
    if($(this).hasClass('some'))
    alert('!');
});

如何在本机JavaScript中编写此代码？

我试过这个，但这不起作用：

var target = document.getElementsByTagName('td');
target.addEventListener('click', function(){
    if ( target.hasAttributes('class', 'some') )
        alert('!');
});

Answer 1

您可以将其转换为：

＆＃13;

var td = document.querySelectorAll('td');

for (t of td) {
  t.addEventListener('click', function() {
    if (this.classList.contains('red')) {
      console.log(this.className,'!');
    }
  })
}

＆＃13;

.red { color: rgb(255, 0, 0);}
.blue { color: rgb(0, 255, 0);}
.green { color: rgb(0, 0, 255);}

＆＃13;

<table>
  <tr>
    <td class='red'>Red</td>
    <td class='blue'>Blue</td>
    <td class='green'>Green</td>
  </tr>
  <tr>
    <td class='red'>Red</td>
    <td class='blue'>Blue</td>
    <td class='green'>Green</td>
  </tr>
  <tr>
    <td class='red'>Red</td>
    <td class='blue'>Blue</td>
    <td class='green'>Green</td>
  </tr>
</table>

＆＃13;

Answer 2

非常感谢你们！我在你的帮助下编写了我自己的代码。这段代码对我有用：

var elements = document.getElementsByTagName('td');
for(var i = 0; i<elements.length;i++){
    elements[i].addEventListener('click', function () {
        if (this.hasAttributes('class','some') ) {
            alert('!');
        }
    });
}

Answer 3

您的代码无效，因为您正在进行的查询没有返回单个值，因为有多个td（它返回一个HTMLCollection数组）
您可以通过在父（tr或表）上添加eventListener，然后使用e.target检查单击的目标并将逻辑放在那里来避免所有这些。

这是一个使用完全原生JS的更有效的例子。

var table = document.querySelector('table');

table.addEventListener('click', function(e) {
  var target = e.target;
  if(target.tagName === "TD" && target.classList.contains('some') ) {
    alert('!');
  }
});

Answer 4

也许，这样的事情应该做：

var elements = Array.prototype.slice.call(document.getElementsByTagName('td'));
elements.forEach(function (element) {
    element.addEventListener('click', function () {
        if (element.classList.indexOf('some') >= 0) {
            alert('!');
        }
    });
});

编辑：改变它，谢谢！

我怎么能在本机JS中写这个

4 个答案: