jQuery - 点击事件, 当单元格被点击时始终更改背景颜色

Question

例如： 你有一个表格，它有4个td和2个tr。表格的背景颜色是白色。如果我点击A td，A td应该变成红色，然后如果我点击B，B td应该变成红色，A td也应该变成红色。如果我再点击C，C 应该变成红色，B 和 A 也应该变成红色。

我有类似这样的东西。但是它不好，因为当我再次点击时，我想把颜色改回白色。 http://jsfiddle.net/k8UgT/193/ 我使用的代码

<table>
    <tr>
        <td onclick="function()">AAA</td>
        <td onclick="function()">BBB</td>
        <td onclick="function()">CCC</td>
    </tr>
        <tr>
        <td onclick="function()">DDD</td>
        <td onclick="function()">EEE</td>
        <td onclick="function()">FFF</td>
    </tr>
</table>

JS:

$( function() {
  $('td').click( function() {
    $(this).css('background', '#aaa')
  } );
} );

- Karol

---

你想要这个：This 还是这个：This？ - Tushar Gupta - curioustushar

如果您正在使用jQuery，则不需要在<td>上定义onclick函数。 - Jan Richter

Answer 1

欢迎来到SO。

首先，您不需要在上使用onclick属性。其次，我建议使用CSS类而不是设置背景颜色。

CSS

.red-cell {
   background: #F00; /* Or some other color */
}

JS

$( function() {
  $('td').click( function() {
    $(this).toggleClass("red-cell");
  } );
} );

关于toggleClass的更多信息，请点击这里阅读。 更新的示例代码。

- Hugo Tunius

---

有没有办法判断页面是否已经添加了“红色单元格”，如果是，能否在您单击下一个单元格之前将其删除？就像只有一个单元格可以同时变成红色一样？ - KVDD

@KerynGill 我不确定我是否理解了您的意思。您是指您想一次只允许一个红色单元格吗？ - Hugo Tunius

是的，那正是我想要的。我相信我用以下代码实现了这个功能... <script> $( function() { $('.productslider div.slide a.addclassonbtn').on('click',function(){ $('.productslider div.slide a.addclassonbtn').removeClass('selected'); $(this).addClass('selected'); }); }); </script> - KVDD

Answer 2

在你的 JavaScript 中，使用 CSS 类来设置红色背景，然后使用 .toggleClass()。

JavaScript

$('td').click( function() {
    $(this).toggleClass('on');
});

CSS

td.on {
    background-color: red;
}

Updated Fiddle

- techfoobar

Answer 3

尝试这个：

$( function() {
  $('td').click( function() {
      if($(this).attr('style'))
    $(this).removeAttr('style');
      else
    $(this).css('background', '#aaa')
  } );
} );

- Rasool Ghafari

Answer 4

试试这个

$( function() {
  $('td').toggle( function() {
    $(this).css('background', 'red');
  },function(){
  $(this).css('background', 'white');
  });
} );

这里是 jsFiddle http://jsfiddle.net/k8UgT/199/。

- Anto Subash