Jquery 我有一个对象数组，我想在mouseenter上显示div_Jquery_Arrays_Hover

Jquery 我有一个对象数组，我想在mouseenter上显示div

jquery arrays

Jquery 我有一个对象数组，我想在mouseenter上显示div,jquery,arrays,hover,Jquery,Arrays,Hover,我有一个对象数组，我想在mouseenter上显示div:title列表。然后在老鼠离开时躲起来。问题是我不能让它在每一个目标上都起作用。我只能让它工作一个单独的对象，或者同时工作所有对象：代码如下： <body> <div class="row" style="margin-right: 0px;"> <div class="container"> <?php

我有一个对象数组，我想在mouseenter上显示div:title列表。然后在老鼠离开时躲起来。问题是我不能让它在每一个目标上都起作用。我只能让它工作一个单独的对象，或者同时工作所有对象：

代码如下：

    <body>

     <div class="row" style="margin-right: 0px;">

        <div class="container">
            <?php

                $q = "SELECT * FROM votes ORDER BY timestamp DESC";
                $r = mysqli_query($dbc, $q);

                while($vote_list = mysqli_fetch_assoc($r)) { ?>

                <div class="col-md-6 vote-list" id="test" style="background-image: url(<?php echo
                 $vote_list['url']; ?>)">         
                    <a href="view.php?id=<?php echo $vote_list['id']; ?>">
                        <div class="title-list" id="titleview">
                            <p class="texttitle"><?php echo $vote_list['text']; ´?></p>
                        </div> 
                    </a>
                </div>


            <?php } ?>
        </div>
</div> 

 </body>    

 <script>
 var cancel = false;
 $("div.vote-list").hover(function(){
 $("#titleview").show();
 },function(){
 if(!cancel)
  $("#titleview").hide();
 });


您可以使用$（this）
引用当前的投票列表
var cancel = false;
$("div.vote-list").hover(function () {
    $(this).find(".title-list").show();
}, function () {
    if (!cancel) $(this).find(".title-list").hide();
});

正如@pmandell正确指出的，您必须使用悬停元素的上下文来确定切换哪个元素您似乎还在复制ID。。您的所有div.vote-list都具有相同的id:test。这导致HTML无效。
我还想指出，使用.mouseenter（）
和.mouseleave（）
更为明智：

var cancel=false；
$（“div.vote-list”）。在（'mouseenter'，函数（）{
$（this.find（“.title list”）.show（）；
})
.on（'mouseleave'，函数（）{
取消| |$（this）.find（“.title list”）.hide（）；
});
.titleview{
显示：无；
}

1.
2.
3.
4.
5.

    var cancel = false;
    $("div.vote-list").on('mouseenter', function () {
        $(this).find(".title-list").show();
    })
    .on('mouseleave', function () {
        cancel || $(this).find(".title-list").hide();
    });