javascript - "Table tr"、 "table tbody"，不适用于 javascript 仅适用于 "table"

Question

我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时，我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同，我想将它们显示在表格之外的另一个元素中。

此时，我的表格带有悬停，我可以加载图像(我对所有行使用相同的图像只是为了尝试)，但它会影响整个元素，包括 table 头。我想避免悬停在头上，但它只适用于“tblList”，每次我尝试将其更改为“tblList tr”、“tblList tbody”或类似内容时，它都不起作用。如果您看到任何解决方案，请告诉我。谢谢!

编辑:如果复制悬停并将它们粘贴到我的列表函数中，最后，它适用于:“tblList .tablerow”。仍然不明白为什么如果它在外面就不起作用。

HTML:

 <article class="table-responsive">
    <table class="table table-striped table-responsive" id="tblList">
  </table>
  </article>

JS:

 $("#tblList").hover(function() {
        var piso1 = JSON.parse(tbPisos[0]);
        $('#displayDiv img').attr("src", piso1.Foto);

    }, function(){
        $('#displayDiv img').attr("src", null);
    });

列表功能:

function List(){
    $("#tblList").html("");
    $("#tblList").html(
        "<thead>"+
       "<tr>"+
        //"<th></th>"+
        "<th>Precio</th>"+
        "<th>Direccion</th>"+
        "<th>Ciudad</th>"+
        "<th>Fecha</th>"+
        "<th>Estado</th>"+
        "</tr>"+
        "</thead>"+
        "<tbody>"+
        "</tbody>"
    );


    for(var i in tbPisos){
        var pisos= JSON.parse(tbPisos[i]);
        $("#tblList tbody").append("<tr class ='table-row'>"+"td"+
           // "<td>"+pisos.ID+"</td>" +
            "<td>"+pisos.Precio+ " €"+"</td>" +
            "<td>"+pisos.Direccion+"</td>" +
            "<td>"+pisos.Ciudad+"</td>" +
            "<td>"+pisos.Anyo+"</td>" +
            "<td>"+pisos.Estado+"</td>" +
            +"</tr>");
    }
}

Answer 1

似乎您可以对父级执行悬停事件，但不能对其子级执行悬停事件。

使用on() 在动态附加的元素上绑定(bind)事件。

和 Child Selector (“parent > child”) 对特定父项下的子项执行事件。

$('body').on('hover', "#tblList > tbody", (function() {
        var piso1 = JSON.parse(tbPisos[0]);
        $('#displayDiv img').attr("src", piso1.Foto);
    }, function(){
        $('#displayDiv img').attr("src", null);
    }
});

或者

$('#tblList').on('hover', 'tbody', (function() {
          var piso1 = JSON.parse(tbPisos[0]);
          $('#displayDiv img').attr("src", piso1.Foto);
      }, function(){
          $('#displayDiv img').attr("src", null);
      }
});

请确保您获得的值为 var piso1 = JSON.parse(tbPisos[0]);在你的悬停函数中，检查你的控制台是否出现任何错误。

希望这对您有帮助。