Question

我正在编写基于日历的系统。它显示为一个表格。一个事件可以占用几个不同的表格单元格，并且我希望在悬停时使单个事件的所有单元格都突出显示。我以前做了好几次，但我遇到了一个新问题。

这次，日历表及其内容是动态生成的，因为当用户尝试保存新事件时，它是潜在冲突事件的预览。

在链接元素上的悬停样式时，我使用基于现有事件ID的数据值作为标识符。我触发了一个mouseover和mouseout事件，它会切换一个＆＃34; hover＆＃34;与具有与悬停元素具有相同数据值的元素上的类。

但是，当我动态地将数据值添加到表格单元格时，在我的chrome检查器中，它不会显示在相关元素的HTML中。我仍然可以选择一个相关元素，并通过控制台命令行检查它是否具有数据值，并且它确实具有数据值。但是悬停样式和检查器中显示的HTML并没有反映出来。

我做了一个简化的小提琴，我只有一个简单的按钮，添加＆＃39; 1＆＃39;作为六个表格单元格中的四个的数据值。在动态表下面，是一个已经具有数据值的静态表。请注意，单击按钮之前不会启动悬停样式链接。单击按钮后，静态表具有工作悬停链接，而动态更新表则没有。嗯，它以一种方式工作。从动态表中悬停元素将成功链接到静态表，并且仅链接到静态表。这让我相信它是动态更新元素的CSS选择，数据值失败。

请注意，动态表中带有id的单个元素会报告实际上已在其上设置了数据值。

如何让我的动态表工作，以便悬停链接可见？

HTML：

<button onclick="add_data()">
Add Data (and hover links)
</button>

<table>
<tr>
   <td class="taken"></td>
   <td class="taken" id="random-td"></td>
   <td class="taken"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td class="taken"></td>
</tr>
</table>

<br/>

<table>
<tr>
   <td class="taken" data-value="1"></td>
   <td class="taken" data-value="1"></td>
   <td class="taken" data-value="1"></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td class="taken" data-value="1"></td>
</tr>
</table>

使用Javascript：

window.add_data = function(){

    console.log($('#random-td').data('value')); //undefined

    $('.taken').data("value", 1);

  $("td.taken").mouseover(function(){
        var value = $(this).data("value");
        $("td.taken[data-value='1']").toggleClass("hovered");
    });
    $("td.taken").mouseout(function(){
        var value = $(this).data("value");
        $("td.taken[data-value='1']").toggleClass("hovered");
    });

  console.log($('#random-td').data('value')); // 1
}

CSS：

td{
  width: 50px;
  height: 20px;
}

td.taken{
  background-color: #19b4e0;
}

td.taken.hovered, 
td.taken:hover{
    background-color: #75D2EC;
}

http://jsfiddle.net/420ffwL5/4/

如何在动态添加的数据值上选择元素？

0 个答案: