Question

我有一个带有data-id属性的div类“asset-container”。我还有一个div类“popover-content”，带有相关的data-id。

当我将鼠标悬停在“资产容器”上时，我想要“popover-content”节目。

有很多这些，这就是为什么我有数据ID附加到两个div的每一个，所以我可以调用相关的div来显示。

我已经尝试了几次迭代的脚本而且没有到达任何地方

JS：

$(document).ready(function() {
    custom_popover();
});
function custom_popover() {
    $(".asset-container").mouseover(function() {
    $('.popover-content [data-id=' + this.value + ']').show();

   });
}

HTML：

<ul class="col-xs-4">
    <li class="thumnail-video">
        <div class="popover-content" data-id="71"></div>
        <div class="asset-container">

    <video class="img-responsive portrait" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/71/mobile/3.mp4" data-id="71">      </video>

    </div>
</li>

</ul>
<ul class="col-xs-4">

<li class="thumnail-video">
    <div class="popover-content" data-id="69"></div>
    <div class="asset-container">

    <video class="img-responsive landscape" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/69/mobile/2.mp4" data-id="69"></video>

            </div>
        </li>
    </ul>
</div>

Answer 1

将您的代码更改为：

$(".asset-container").mouseover(function() {
   var id = $(this).children("video").data("id");
   $(this).parent().children('.popover-content[data-id=' + id + ']').show();
});

鼠标悬停显示相关的div

1 个答案: