更新2

Question

我设计了一个表格日历，桌面下有一堆TD / TR元素。

我想在桌子的每一天进行互动，比如当我点击一个td元素（这是一天）时，它将以边框突出显示，当我移动光标并点击其他日期时，这一天将突出显示，之前的一个将没有突出显示。我的代码是这样的，但问题是.off点击功能。它并非不突出，因此所有表格单元格都会突出显示并持续存在。我怎么能用jQuery解决这个问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){

 $("td.PTDC").on("click",function(){  

  $(this).css("background-color", "#0093e0");
  $(this).css("padding", "5px");
  console.log("onclick");
    }); 

 $("tbody").off("click",function(){  
  $(this).css("background-color", "#ffffff");
  $(this).css("padding", "0px");
  console.log("offclick");
    }); 
});

    </script>

============================ 我在源代码中观察到，点击它之前有：

<td class="PTDC PTLC OOCT" id="db_saw_1883_7_1_6" style="border-style:none;border-right:solid 1px #DADADB;border-bottom:solid 1px #DADADB;">

点击后有：

<td class="PTDC OOCT" id="db_saw_1883_7_1_5" style="border-style: none solid solid none; border-right-width: 1px; border-right-color: rgb(218, 218, 219); border-bottom-width: 1px; border-bottom-color: rgb(218, 218, 219); background-color: rgb(0, 147, 224); padding: 5px;">

但是由于我在日历中的所有30天都是每天td元素的一天，因此当点击其他td元素时很难将格式关联起来。

Answer 1

$(function(){
$("table tr td").on("click",function(){
    $("td").removeClass("active");
    $(this).addClass("active");
})

})


//CSS

td.active{
  background: blue;
  color: #fff;
}

工作小提琴https://jsfiddle.net/o2gxgz9r/15797/ 您只需要从每个td中删除活动类，然后添加当前单击的td。

Answer 2

更新2

OP正在使用类样式无法覆盖的原始应用程序。我从各种关于工具的线索中推断出（OP很模糊）它： =生成... HTML表格 - 它使用内联样式 - 如果是这样那么这就解释了为什么使用类的样式非常困难。 - 内联样式（例如<div style='color:blue'>）不能被样式表中的规则集覆盖，甚至不能被<style>块覆盖，其中！important是例外。 演示3 将展示2种处理内联样式属性的方法。

$('td').on('click', function(e) {
  var tgt = e.target;
  e.stopImmediatePropagation();
  $('td').each(function(idx, cell) {
    cell.style.backgroundColor = '#fff';
    cell.style.borderColor = '#000';
    if ($(cell).hasClass('today')) {
      cell.style.backgroundColor = 'rgba(0, 0, 255, 1)';
      cell.style.borderColor = '#aae1ff';
    }
  });
  tgt.style.backgroundColor = '#0093e0';
  tgt.style.borderColor = '#09e';
});

e.target是用户点击的<td>。
e.stopImmediatePropagation();可防止事件冒泡并被任何其他听众听到。
$('td').each(function(idx, cell) {...每个<td>都会运行一个函数。

每个单元格（即<td>）的内联样式属性设置为：

 cell.style.backgroundColor = '#fff';

 cell.style.borderColor = '#000';

如果此特定单元格具有.today类，则：

if ($(cell).hasClass('today')) {
  cell.style.backgroundColor = 'rgba(0, 0, 255, 1)';
  cell.style.borderColor = '#aae1ff';
}

for循环完成后，更改e.target样式：

 tgt.style.backgroundColor = '#0093e0';

 tgt.style.borderColor = '#09e';

更新1

我误解了这个问题：OP的期望行为是一次只有一个单元格可以拥有.lit类。使用.addClass()，.removeClass()和.not()进行简单修改即可。见演示2。

/* Delegate the click event on all
|| td (cell).
|| Remove the .lit class on every <td>
|| and add .lit class for the clicked <td>
*/
$('td').on('click', function() {
    var that = $(this);
  $('td').not(that).removeClass('lit');
    that.addClass('lit');
});

问题

“...但问题是.off点击功能。它不会突出显示所有表格单元格突出显示并持续存在。我怎样才能使用jQuery解决这个问题？” < / p>

OP提到的行为称为切换，即在“状态”之间来回切换的能力（例如，状态在关闭和开启< / em>，或 light 和 dark 等）。在这种情况下，它是2背景的切换。

.on()方法是在上添加事件监听器 的任何一个或一组元素（例如$('td')）的函数。

.off()方法是一个删除任何指定个人或元素组的事件监听器 off 的函数。 .off()无法撤消.on()所做的任何事情，.off() 删除 .on()。因此，每次<td>点击都会丢失注册到它的事件监听器。

解决方案

避免使用.css()方法设置一组元素的样式

操纵类的效率要高得多。在此演示中，.lit是另一个状态，默认状态为<td>，没有类.lit

.toggleClass()是用于执行此操作的方法。

以下演示中的主要功能解决了OP解释的问题。作为奖励，我添加了以下功能：

今日亮点

为每月的每一天生成一个数字

详情在演示
中发表
演示1（切换班级）

// Make a Date Object var d = new Date(); // Get today's day as a number var today = d.getDate(); /* Find the cell at the index number || (which is eq -1) and add thr .today class */ $('td').eq(today - 1).addClass('today'); /* On each cell, add the day number, unless || the cell has class .empty */ // Note: the syntax of string on line 19 // is ES6 Template Literal see post for ref. $('td').each(function(index, day) { if ($(this).hasClass('empty')) { return } $(this).append(`<b>${index+1}</b>`); }); /* Delegate the click event on all || td (cell). || callback on each td is to || toggle the .lit class */ $('td').on('click', function() { $(this).toggleClass('lit'); });

.month { table-layout: fixed; width: 90%; min-height: 250px; border-spacing: 1px; border: 3px outset grey } caption { font-variant: small-caps } .month td { border: 2px inset black; background: #fff; cursor: pointer; } td.lit { background-color: #0093e0; border-color: #09e; } td.today { background: rgba(0, 0, 255, 1); border-color: #aae1ff; } td.today.lit { background: tomato; border-color: red } td b { font-size: .3em; color: #123; vertical-align: top; display: inline-block; margin: -7px 0 0 -5px; } td.today b { color: #fff } .empty { /* Prevents any mouse events || i.e unclickable */ pointer-events: none; cursor: default; }

<table class='month'> <caption>October</caption> <thead> <tr> <th>SUN</th> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td class='empty' colspan='4'> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

演示2（独家等级）

// Make a Date Object var d = new Date(); // Get today's day as a number var today = d.getDate(); /* Find the cell at the index number || (which is eq -1) and add thr .today class */ $('td').eq(today - 1).addClass('today'); /* On each cell, add the day number, unless || the cell has class .empty */// Note: the syntax of string on line 19 // is ES6 Template Literal see post for ref. $('td').each(function(index, day) { if ($(this).hasClass('empty')) { return } $(this).append(`<b>${index+1}</b>`); }); /* Delegate the click event on all || td (cell). || Remove the .lit class on every <td> || and add .lit class for the clicked <td> */ $('td').on('click', function() { var that = $(this); $('td').not(that).removeClass('lit'); that.addClass('lit'); });

.month { table-layout: fixed; width: 90%; min-height: 250px; border-spacing: 1px; border: 3px outset grey } caption { font-variant: small-caps } .month td { border: 2px inset black; background: #fff; cursor: pointer; } td.lit { background-color: #0093e0; border-color: #09e; } td.today { background: rgba(0, 0, 255, 1); border-color: #aae1ff; } td.today.lit { background: tomato; border-color: red } td b { font-size: .3em; color: #123; vertical-align: top; display: inline-block; margin: -7px 0 0 -5px; } td.today b { color: #fff } .empty { /* Prevents any mouse events || i.e unclickable */ pointer-events: none; cursor: default; }

<table class='month'> <caption>October</caption> <thead> <tr> <th>SUN</th> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td class='empty' colspan='4'> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

演示3

// Make a Date Object var d = new Date(); // Get today's day as a number var today = d.getDate(); /* Find the cell at the index number || (which is eq -1) and add thr .today class */ $('td').eq(today - 1).addClass('today'); /* On each cell, add the day number, unless || the cell has class .empty */ // Note: the syntax of string on line 19 // is ES6 Template Literal see post for ref. $('td').each(function(index, day) { if ($(this).hasClass('empty')) { return } $(this).append(`<b>${index+1}</b>`); }); /* Delegate the click event on all || td (cell). || See post update for details || */ $('td').on('click', function(e) { var tgt = e.target; e.stopImmediatePropagation(); $('td').each(function(idx, cell) { cell.style.backgroundColor = '#fff'; cell.style.borderColor = '#000'; if ($(cell).hasClass('today')) { cell.style.backgroundColor = 'rgba(0, 0, 255, 1)'; cell.style.borderColor = '#aae1ff'; } }); tgt.style.backgroundColor = '#0093e0'; tgt.style.borderColor = '#09e'; });

.month { table-layout: fixed; width: 90%; min-height: 250px; border-spacing: 1px; border: 3px outset grey } caption { font-variant: small-caps } .month td { border: 2px inset black; background: #fff; cursor: pointer; } td.lit { background-color: #0093e0; border-color: #09e; } td.today { background: rgba(0, 0, 255, 1); border-color: #aae1ff; } td.today.lit { background: tomato; border-color: red } td b { font-size: .3em; color: #123; vertical-align: top; display: inline-block; margin: -7px 0 0 -5px; background: rgba(0, 0, 0, 0); pointer-events: none; } td.today b { color: #fff } .empty { /* Prevents any mouse events || i.e unclickable */ pointer-events: none; cursor: default; }

<table class='month'> <caption>October</caption> <thead> <tr> <th>SUN</th> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td class='empty' colspan='4'> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

参考

<强>时间    Date()，     .getDate()

DOM集合    .eq()，    .each()

类操作   .toggleClass()，    .addClass()，    .removeClass()，    .hasClass()

活动委派 .on()， .off()

<强>杂    .append()，    ES6 Template Literals    .not()

Answer 3

$(function() {
  $("table tr td.PTDC").on("click", function() {
    //This css will be applied across all table td's so make it specific
    $("table tr td").css({
      "background-color": "#fff",
      "border": "1px solid red"
    });
    $(this).css({
      "background-color": "#0093e0",
      "border": "1px solid red"
    });
  })
})

https://jsfiddle.net/o2gxgz9r/15797/

根据您的代码更新小提琴。检查这是否满足。但请确保我在通用表tr td上应用CSS，以便进行此特定的

选择jQuery

3 个答案:

更新2

更新1

问题

解决方案

演示1（切换班级）

演示2（独家等级）

演示3

参考