Question

我有一个对象数组，我想在mouseenter上显示div：title-list。然后在鼠标离开时隐藏。问题是我不能让它在每一个objekt上都能运作。我只能让它同时工作一个objekt，或者所有这些objekt：

以下是代码：

    <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();
 });

Answer 1

您可以使用$(this)来引用当前的.vote-list。

var cancel = false;
$("div.vote-list").hover(function () {
    $(this).find(".title-list").show();
}, function () {
    if (!cancel) $(this).find(".title-list").hide();
});

Answer 2

正如@pmandell正确指出的那样，您必须使用悬停元素的上下文来确定要切换的内容。 您似乎也在复制ID ..您的所有div.vote-list都具有相同的ID：test。这会导致HTML无效。

我还想指出使用.mouseenter()和.mouseleave()更合适：

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

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

.titleview {
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

                <div class="col-md-6 vote-list" style="">1         
                    <a href="">
                        <div class="title-list titleview">
                            <p class="texttitle">Some text</p>
                        </div> 
                    </a>
                </div>

                <div class="col-md-6 vote-list" style="">2         
                    <a href="">
                        <div class="title-list titleview">
                            <p class="texttitle">Some text</p>
                        </div> 
                    </a>
                </div>

                <div class="col-md-6 vote-list" style="">3         
                    <a href="">
                        <div class="title-list titleview">
                            <p class="texttitle">Some text</p>
                        </div> 
                    </a>
                </div>

                <div class="col-md-6 vote-list" style="">4         
                    <a href="">
                        <div class="title-list titleview">
                            <p class="texttitle">Some text</p>
                        </div> 
                    </a>
                </div>

                <div class="col-md-6 vote-list" style="">5         
                    <a href="">
                        <div class="title-list titleview">
                            <p class="texttitle">Some text</p>
                        </div> 
                    </a>
                </div>

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

2 个答案: