2013-01-13 80 views
0

衰落其他的div我發現了什麼,我試圖完成此工作的jsfiddle:http://jsfiddle.net/gdoron/YwKVt/3/問題與jQuery兄弟懸停

我有一個foreach循環:

<div class="box-product"> 
    <?php 
    $counter = 0; 
    ?> 
    <?php foreach ($products as $product) { ?> 
    <?php $counter++; ?> 
    <div class="feature prod-<?php echo $counter ?>"> 
    <?php if ($product['thumb']) { ?> 
    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> 
    <?php } ?> 
    <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div> 
    <?php if ($product['price']) { ?> 
    <div class="price"> 
     <?php if (!$product['special']) { ?> 
     <?php echo $product['price']; ?> 
     <?php } else { ?> 
     <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span> 
     <?php } ?> 
    </div> 
    <?php } ?> 
    <?php if ($product['rating']) { ?> 
    <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div> 
    <?php } ?> 
<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div> 
    </div> 
    <?php } ?> 
    </div> 

而且輸出是這樣的:

<div class="box-product"> 
    <div class="feature prod-1"> 
    <div class="feature prod-2"> 
    <div class="feature prod-3"> 
    <div class="feature prod-4"> 
</div> 

我試圖實現t他從該解決方案通過添加到我的頭js的小提琴:

<script type="text/javascript"> 
$('.feature').hover(function(){ 
$(this).siblings().addClass('fade'); 
}, function(){ 
$(this).siblings().removeClass('fade'); 
}); 
</script> 

,並添加了類:

.fade{opacity:.5;} 

沒有運氣。有沒有更好的方法來實現這一點?

+0

請提供正確的HTML。這是無效的標記 – Alexander

回答

1

我不確定,但是會在DOM準備好之前嘗試執行它嗎?

http://api.jquery.com/ready/
http://api.jquery.com/load-event/

這兩個是加載頁面時的事件解僱了。在頁面完全加載之前,您正在使用的代碼將不起作用。

另外,你在你的HTML標記錯誤<div>需要正確使用就關上添加</div>

+0

哇,就是這樣。只需將函數放入jQuery(document).ready(function($){};它就像一個魅力一樣工作,非常感謝! – FTSoR

0

和它的工作很大:

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('.feature').hover(function(){ 
    $(this).siblings().addClass('fade'); 
    }, function(){ 
    $(this).siblings().removeClass('fade'); 
    }); 
    }); 
</script>