Question

我正在学习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放在正确的位置，如您所见here一切正常，除了页面采取链接行为，将窗口集中在顶部，我不知道为什么。首先，我尝试了相同的代码，没有链接，只是图像，同样的事情发生了。一些想法？

感谢!!!

Answer 1

爱德华，

尝试从

更改您的代码

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

到

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

在jQuery中执行代码很重要，一般来说，你需要等待文件加载

$(function(){
  // put your code here
});

Answer 2

导航被阻止，但您淡出图片，最终隐藏页面。当视觉上移除图像区域时，页面将自动滚动到顶部，因为页面变得不那么高。之后你会淡入新图像，但已经发生了必要的滚动。

您想要的是将图像包装在具有固定大小的容器（例如<div>）中，以便容器保持其大小。这样，就不会发生滚动，因为即使内部图像被隐藏，容器也会占用空间。看起来你已经在图像上应用了填充。你最好将它移动到容器中，这样在过渡期间填充也是持久的。

Answer 3

单独的e.preventDefault不够好，你应该在结尾处返回false

jquery上的链接行为问题，e.preventDefault不起作用？

3 个答案: