2

こんにちはみんな私は少し奇妙な問題を抱えています、そして基本的にこのページで：

http://www.carbondelight.co.uk

BxSlider（http://bxslider.com/）を利用した無限ループ上に6つの画像/製品がありますが、そのビットは単純です。

次に、それぞれの商品画像にカーソルを合わせると商品名を表示する関数をjQueryでコーディングしました。

私が抱えている問題は、ホバリングが各ループでのみ機能し、次のループにクロスオーバーしないことです。たとえば、前述のページを見ると、ループの最後の画像が赤い車の後部座席2つであることがわかります。その画像とその隣のボートの画像の間にカーソルを合わせると、次のようになります。製品名は変更されません。ただし、completleyを次のループに移動すると、すべての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 に答える