Question

我正在尝试使用2x2表格，其中每个单元格在悬停时变成另一个2x2表格，类似于koalastothemax.com。这是通过

工作的

使悬停的细胞不可见
在其中附加一个2x2表格，将新单元格标记为＆＃34; new＆＃34;
调整标记为＆＃34; new＆＃34;
取消标记新单元格

第一个悬停甚至运作良好，单元格变成一个较小的2x2表。但是，当将鼠标悬停在新附加表的较新单元格部分上时，尽管有$（this）.append，它会将表附加到父元素（最初悬停在其上的单元格）

这里是jsfiddle链接：https://jsfiddle.net/0c64tt2q/

非常感谢帮助。谢谢！

$(document).ready(function () {
    //Cursor enters a visible cell
    $('td.standard').mouseenter(function () {

        //Make the cell invisible
        $(this).removeClass('standard');

        //Find the dimensions of the cell
        var dimension = $(this).width();

        //Insert 2x2 table into cell
        $(this).append("<table><tr><td class='standard new'></td><td class='standard new'></td></tr><tr><td class='standard new'></td><td class='standard new'></td></tr></table>");

        //Resize the new cells and remove the 'new cell' marker
        $('.new')
            .css({
                'width': dimension / 2,
                'height': dimension / 2
            })
            .removeClass('new');
    });
});

Answer 1

您的mouseenter事件仅设置为第一组表格单元格。尝试以这种方式附加事件，以便事件处理程序“实时”并且对新元素也有效。

$(document).on("mouseenter", 'td.standard', function(event) {

  //Make the cell invisible
  $(this).removeClass('standard');

  //Find the dimensions of the cell
  var dimension = $(this).width();
...

$（this）.append（）附加到父级

1 个答案: