2

大家好，我有一个有点奇怪的问题，基本上在这个页面上：

http://www.carbondelight.co.uk

我在由 BxSlider ( http://bxslider.com/ )驱动的无限循环上有 6 个图像/产品，这很简单。

然后，我在 jQuery 中编写了一个函数，当您将鼠标悬停在相应的产品图像上时，该函数会显示产品名称。

我遇到的问题是，悬停只适用于每个循环，不会跨越到下一个循环。例如，如果您查看前面提到的页面，您会注意到循环中的最后一个图像是一辆红色汽车的两个后座，如果您尝试将鼠标悬停在该图像和旁边的船图像之间，您将产品名称不变。但是，如果您将完全移动到下一个循环中，则所有 jQuery 都会再次工作。对于我的生活，我无法解决这个问题。有没有人有任何想法？

提前谢谢大家。

丹尼尔。

代码在这里。

    $('.newp-hover').mouseenter(function() {
    var imgValue = $(this).attr("name");
    //alert(imgValue);
    $('.newp-pre').hide();
    $('.newp-name').hide();
    $('.' + imgValue).fadeIn('slow');
});

HTML在这里

<div id="new-p-con">
    <div class='newp-title textshadow'>NEW PRODUCTS</div><div class='newp-bt-con'><div class="newp-left-btn" id="go-prev2"></div><div class="newp-right-btn" id="go-next2"></div></div>
    <div class="newp-img-con">
                <ul id="slider5">
                        <?php

                        for ( $j = 0 ; $j < $rows ; ++$j )
                        {
                            $row = mysql_fetch_row($result3);
                            $sql4 = "SELECT smlImg FROM imageTable WHERE partID='$row[0]'";
                            $product = performQuery($sql4);
                             //displays the product images
                            echo "<li class='newp-li'><a href='prodview.php?id=$row[0]' class='newp-hover' name='$j'><img src='$image$product[0]' /></a></li>";
                        }
                        ?>
                </ul>
        <div class="newp-name-con">
        <?php
            //finds the first product name
            $showyou = performQuery($sql5);

        for ( $j = 0 ; $j < $rows5 ; ++$j )
        {
            $row2 = mysql_fetch_row($result5);
            //displays the first product name so a name shows when page is loaded
            echo "<p class='none newp-name $j'>$row2[1]</p>";
        }

        ?>

        </div>
    </div>

4

1 回答 1

3

我有一种感觉，在您完成mouseover事件的初始绑定之后，滑块正在创建更多元素。由于您仅使用绑定时存在的.mouseover()元素进行绑定，因此将触发事件。

如果在绑定live事件后添加更多滑块将解决您的问题。它不会绑定到绑定时存在的元素，而是会加上与选择器匹配的所有未来元素：

$('.newp-hover').live('mouseenter', function() {
    var imgValue = $(this).attr("name");
    //alert(imgValue);
    $('.newp-pre').hide();
    $('.newp-name').hide();
    $('.' + imgValue).fadeIn('slow');
});

编辑

.live()自 jQuery v1.7 起已弃用。相反，您应该使用委托事件：

$(documents).on('mouseenter', '.newp-hover', function() {
    var imgValue = $(this).attr("name");
    //alert(imgValue);
    $('.newp-pre').hide();
    $('.newp-name').hide();
    $('.' + imgValue).fadeIn('slow');
});
于 2011-12-20T22:01:28.337 回答