如何使用此功能隱藏某些元素？

Question

當用戶將鼠標懸停在上面時，我正在使用以下函數來縮放每個圖像。

$(function() { 
    var imgScale = 4; 
    $("img").each(function() { 
     $.data(this, 'size', { 
      width: $(this).width(), 
      height: $(this).height() 
     }); 
    }).hover(function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height * imgScale, 
      width: $.data(this, 'size').width * imgScale 
    }); 
    }, function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height, 
      width: $.data(this, 'size').width 
     }); 
    }); 
}); 

頁面的基本結構如下：

<div id="product-container" style="width: 100%; overflow: auto;"> 
    <div id="products" style="width: 50%; display: block; float: left;"> 
     <h2>Products</h2> 

     <div class="product"> 
      <div class="image"> 
       <a href="page.php?product=123" title="Product 123"> 
        <img width="80" height="60" src="product123.jpg" /> 
       </a> 
      </div> 

      <div class="link"> 
       <p><a id="link-123" href="page.php?product=123" title="Product 123">Product 123</a></p> 
      </div> 
     </div> 

     <div class="product"> 
      <div class="image"> 
       ... 
      </div> 

      <div class="link"> 
       ... 
      </div> 
     </div> 

     ... 

    </div> <!-- Close 'products' div --> 

使用jQuery，我想隱藏所有當前沒有懸停在產品<p><a id="link-123"...> ... </a></p>標籤。

除此之外，我想在展示產品名稱的展開圖片上創建文字疊加層（例如「Product 123」）。這可以從圖像本身的title屬性中提取。

這是一個非常早期的工作，因爲你可能已經猜到我是jQuery的新手了。我只是想抓住jQuery的一些基本功能。

Answer 1

拳你要隱藏的各個環節與

$('.link').hide(); 

在你的懸停功能，你必須找到你的形象正確<div class="link">。您可以通過樹加緊你的<div class="product">和向下<div class="product">以做到這一點（也有其他可能的方式來實現這一目標：

$("img").parents('.product').find('.link'); 

現在隱藏或顯示該元素

你完整的代碼可以樣子。

$(function() { 
    $(".link").hide(); 
    var imgScale = 4; 
    $("img").each(function() { 
     $.data(this, 'size', { 
      width: $(this).width(), 
      height: $(this).height() 
     }); 
    }).hover(function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height * imgScale, 
      width: $.data(this, 'size').width * imgScale 
     }).parents('.product').find('.link').show(); 

    }, function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height, 
      width: $.data(this, 'size').width 
     }).parents('.product').find('.link').hide(); 
    }); 
});