Question

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

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

EDITED：如果复制悬停并将它们粘贴到我的列表函数中，最后，它适用于：“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

似乎您可以在父母身上执行悬停事件，但不能在其子女身上执行。

使用 src/some-file.js 绑定动态附加元素的事件。

并 on() 在特定家长下的儿童身上执行活动。

Child Selector (“parent > child”)

OR

$('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); } });的价值，并检查您的控制台是否有任何错误。

希望这会对你有所帮助。

“表tr”，“表tbody”，不工作javascript只能工作“表”

1 个答案: