Скрыть и показать несколько ссылок на странице с помощью jquery

Question

Я работаю над функцией списка продуктов. У меня есть вид сетки для каждого продукта. & Я предоставил ссылку для каждой ячейки сетки. Теперь я хочу скрыть все эти ссылки в каждой ячейке изначально на загрузке страницы. & покажет определенную ссылку внутри ячейки, когда пользователь наводится на эту конкретную ячейку и снова скрывает эту ссылку, когда пользователь перемещает курсор из ячейки. Эта ячейка - не что иное, как div.

Ссылка на короткий список находится в элементе div, имеющем класс product-grid-item.This div - это не что иное, как ячейка сетки, на которой я хочу навести курсор. Фактически, используя функцию переключения, я могу показать/скрыть ссылку на короткий список, но мой код генерирует несколько ячеек ячеек i, e div, поэтому, когда я нахожусь на определенной сетке, ссылка отображается, но она также отображает все ссылки в другой сетки. Я просто хочу показать конкретную ссылку в сетке, на которой пользователь наводит не все ссылки в других ячейках сетки.

Как добиться этого с помощью jQuery? Это мой код:

<?php foreach ($products as $index=>$product):?> 
    <div class="product-grid-item grid-cell"> 
    <div class="shortlist" style="display: none; float:right;"> 
    <?php 
     echo CHtml::ajaxLink('<i class="fa fa-star"></i> Shortlist',Yii::app()->createUrl('productshortlist/shortlistproduct'), 
     array('data'=>array('productId' => $product->product_id), 
     'dataType'=>'text', 
     'type'=>'get', 
     'success'=>'function(result) 
        { 
         if(result == "Success") 
         { 
         alert("Product Added to the shortlist successfully."); 
         $("#shortlistedProduct").prop("disabled",true); 
         } 
         else 
         $("#shortlist_product_error").html(result); 
         }'), 
     array('id'=>'shortlistedProduct'.$index) 
    ); 
    ?> 
    </div> 
    </div> 
<?php endforeach;?> 

Выход:

<a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a> 
<a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a> 

Похожие, но не работает скрипт:

<script> 
    $(".product-grid-item").hover(function() 
    { 
     $(".shortlist").toggle(); 
    } 
    ); 
</script> 

Answer 1

Теперь со всей вашей доступной нам информации, мы можем, наконец, ответить на ваш вопрос

$(function() { 
 
    $(".product-grid-item").hover(function() { 
 
     $(this).find(".shortlist").toggle(); 
 
    }); 
 
});

.shortlist {display: none; float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="product-grid-item grid-cell">Hover on me 
 
    <div class="shortlist"> 
 
     <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a> 
 
     <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a> 
 
    </div> 
 
</div> 
 
<div class="product-grid-item grid-cell">Hover on me 
 
    <div class="shortlist"> 
 
     <a id="shortlistedProduct0" href="#"><i class="fa fa-star"></i> Shortlist</a> 
 
     <a id="shortlistedProduct1" href="#"><i class="fa fa-star"></i> Shortlist</a> 
 
    </div> 
 
</div>

Answer 2

Попробуйте добавить CSS для Div-s, чтобы показать или скрыть ссылки используя hover css selector - http://www.w3schools.com/cssref/sel_hover.asp

Я все еще думаю, что даже если вы не можете решить это, добавьте ing css hover selector для вашего product-grid-item div, чтобы показать shortlist div, затем используйте jQuery только для добавления htat css вместо jQuery toggle() или jQuery hover().

Answer 3

Убедитесь, что вы включили JQuery, если да, то попробуйте этот код

<script> 
$(document).ready(function() { 


    $(".product-grid-item").hover(function() 
    { 
     $(".shortlist").toggle(); 
    } 
    ); 
}); 

</script>