单击TD-jQuery/Javascript时显示唯一的子DIV

我有一个类似日历的表格，1个表格行和31个表格单元格

我正在尝试显示单击的TD的子div，以便它在那天是独一无二的

现在，如果我点击第二个TD，它会显示单元格1的div内容，我需要它显示自己的子div内容

我有弹出工作，但我只需要一只手弄清楚如何显示独特的日div内容

//当用户单击时，打开该单元格特有的弹出窗口
函数openPopup（）{
var popup=document.getElementById（“myPopup”）；
popup.classList.toggle（“显示”）；
}

1

板球
网球
飞镖
例1
2
-
例2

您可以在onclick函数中传递元素本身

<td onclick="openPopup(this)"> 
// ...
// When the user clicks on <div>, open the popup unique to that cell 
function openPopup(ele) {
    // get the div with ele
}

---

不要将同一个

函数

多次（取决于日期）写入

html

而将

函数

绑定到您希望它使用的元素，以避免增加

DOM

上的代码

您可以将以下代码添加到javascript中：

var td = document.querySelector('table td');
td.addEventListener('click', function() {
  var text = this.querySelector('.popuptext').innerHTML;//here you get the day
  //now do your code to display the date here

});

使用jquery访问

//删除弹出窗口的id#1
$（'table tbody tr td'）。在（'click'，函数（e）上{
//你的代码
//...
var titles=$（this.find（“.sports on day”）.html（）；
var desc=$（this.find（“.popup”）.html（）；
var md=$（'td detail'）；
$（'.modal title'）.html（titles）；
$（'.modal body'）.html（desc）；
md.modal（“show”）；
});

标题1
标题2
1

板球
网球
飞镖

例1
2
-
例2
&时代；
接近
保存更改
HTML中的标识符必须是唯一的，不能在多个位置使用
myPopup
id，而不是将
openPopup（）
写入每个
td
onclick
事件，声明一个函数，并通过javascript将其绑定到表的
td
。向我显示td的内容似乎效果最好，这很好，但是我不确定显示弹出DIV需要什么代码，有什么想法吗？在“您的代码”部分添加以下内容以使其工作：$（This）。find（.poputext”）.css(“visibility”，“visible”）；在jquery中可以使用
：visible
调用visible selector ref:Hey我试过了，但没有成功var td=document.querySelector（'table td'）；td.addEventListener（'click'，function（）{var text=this.querySelector（'.poputext'））.innerHTML；//这里是日期//现在执行代码在这里显示日期文本.classList.add（“popup.show”）；}）@StanHowe单击函数中的对象
this
将表示发生
单击事件的
td
&有关
this
关键字的更多信息，请参见。和代码
text.classList.add（“popup.show”）
将不起作用，因为
文本
只是一个
字符串对象
，而不是
DOM
，因此将抛出一个
未定义的
对象错误。如果您想用class
向对象添加类，弹出窗口
对其执行查询选择器，然后添加类，如
var popup=this.querySelector（'.popup'））；popup.classList.add（'show'）；
。
var td = document.querySelector('table td');
td.addEventListener('click', function() {
  var text = this.querySelector('.popuptext').innerHTML;//here you get the day
  //now do your code to display the date here

});