1

私はJqueryを学んでいて、コードの一部に少し問題があります...ここにあります：

$('.product-box .thumb a').click(function(event) {
    event.preventDefault();
    src = $(this).find('img').attr('src')
    $('.products .product-box .image img.principal').fadeOut('fast', function() {
        $('.products .product-box .image img.principal').attr('src', src);
        $('.products .product-box .image img.principal').fadeIn('fast');
    });
    $('.products .product-box .zoom a.principal').attr('href', src);
});

そしてここにHTMLがあります：

  <div class="product-box">
    <div class="image">
      <img src="<?php echo $FOTO; ?>" class="principal" alt="<?php echo $NOME; ?>">
      <div class="zoom"><a class="fancybox lupa principal"  rel="group" href="<?php echo $FOTO; ?>">ampliar</a></div>

      <div class="thumb">
        <a href="#"><img src="http://fernandonagao.com.br/img/logo.png" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
        <a href="#"><img src="<?php echo $FOTO; ?>" alt="<?php echo $NOME; ?>"></a>
      </div>

    </div>
    <div class="desc-prod">
      <h1><?php echo $NOME; ?></h1>
      <p>
        <?php echo $DESC_PRODUTO; ?>
      </p>
      <span><!-- R$ --> <?php echo $VALOR; ?></span>
      <!--<span>Cores Disponíveis:</span>
      <div class="color" style="background-color:#dc5f1b"></div><div class="color" style="background-color:#89ca06"></div><div class="color" style="background-color:#d3bb8c"></div><div class="color" style="background-color:#ce925a"></div>-->
      <span class="voltar"><a href="produtos.php?categoria=<?php echo $categoria; ?>">< Voltar às Categorias</a></span>
    </div><!-- desc-prod -->
  </div><!-- product-box -->

だから、私は製品の画像をフェードさせ、ここでsrc見ることができるように正しい場所に置きたいと思います。ただし、ページがリンク動作で動作し、ウィンドウを上部にフォーカスすることを除いて、すべてがうまくいきます。理由を知っている。最初に、リンクなしで、画像だけで同じコードを試しましたが、同じことが起こりました。いくつかのアイデア？

ありがとう！！！

4

3 に答える 3

1

ナビゲーションは禁止されていますが、画像がフェードアウトし、最終的にページから非表示になります。画像の領域が視覚的に削除されると、ページの高さが低くなるため、ページは自動的に一番上にスクロールします。その後、新しい画像をフェードインしますが、必要なスクロールはすでに行われています。

<div>必要なのは、コンテナがそのサイズを維持するように、固定サイズのコンテナ（たとえば）で画像をラップすることです。そうすれば、内部の画像が非表示になっている場合でもコンテナがスペースを占有し続けるため、スクロールは発生しません。ただし、画像にパディングを適用したようです。これもコンテナに移動するのが最善です。そうすれば、移行中もパディングが持続します。

于 2012-09-26T14:34:37.073 に答える
1

エドゥアルド、

コードをから変更してみてください

$('.product-box .thumb a').click(function(event) {

に

$('.product-box').delegate('.thumb a', 'click', function(event) {

jQueryでは、コードが実行されるときに重要です。一般的なルールとして、ドキュメントの読み込みを待つ必要があります

$(function(){
  // put your code here
});
于 2012-09-26T14:31:35.080 に答える
0

e.preventDefaultだけでは十分ではないため、最後にfalseを返す必要があります

于 2012-09-26T14:32:08.073 に答える