Hide & show multiple links on a page using jquery -


i working on product shortlist feature. have grid view each product & have provided shortlist link each of grid cell. want hide these links in each cell on page load & show specific link within cell when user hovers on particular cell , again hide link when user moves cursor out of cell. cell nothing div.

the shortlist link within div having class product-grid-item.this div nothing grid cell on want hover. using toggle function able show/hide shortlist link, code generating multiple grid cells i,e div when hover on particular grid link getting displayed display links within other grids well.i want show particular link within grid on user hovers not links within other grid cells.

how can achieve using jquery? code:

<?php foreach ($products $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 shortlist successfully.");                         $("#shortlistedproduct").prop("disabled",true);                       }                       else                         $("#shortlist_product_error").html(result);                       }'),         array('id'=>'shortlistedproduct'.$index)       );     ?>     </div>   </div> <?php endforeach;?>

output:

 <a id="shortlistedproduct0" href="#"><i class="fa fa-star"></i> shortlist</a>   <a id="shortlistedproduct1" href="#"><i class="fa fa-star"></i> shortlist</a>

suggested not working script:

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

now information available us, can answer question

$(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>


Comments

Post a Comment

Popular posts from this blog

java - JavaScript + Thymeleaf - select onchange -

i have list of objects services in thymeleaf context, , have following @ page: <select id="inputservice" name="idservice" size="1"> <option th:each="service : ${services}" th:text="${service.name}" th:value="${service.idservice}"/> </select> <p id="selectedservicelimits"></p> each object services contains fields minamount , maxamount . how can print p element these 2 fields of selected service in select javascript? , how can print these 2 fields of option selected when document ready? thanks! <script th:inline="javascript"> /*<![cdata[*/ function showlimits() { var services = /*[[${services}]]*/ null; var selectedindex = $("#inputservice option:selected").index(); var service = services[selectedindex]; $("#amountlimits").text("Ми...
Read more

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more