get data on mousehover for different id - php

Question

I have a listing of products each with differnt ID. Now on frontend I want to get prodouct data(say, name,price and a addtocart button) on mousover.
Here is my code:
This is in loop to get all products:
HTML:
<div class="prod">
<a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
<div style="display: none; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" class="mouse_hover_470">
<input type="hidden" id="prod_id" value="470">
<h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
<div class="price-box">
<span id="product-price-470" class="regular-price">
<span class="price">$387.15</span>
</span>
</div>
<div class="actions">
<button onclick="setLocation('http://dev614.trigma.us/chocolate/index.php/checkout/cart/add/uenc/aHR0cDovL2RldjYxNC50cmlnbWEudXMvY2hvY29sYXRlL2luZGV4LnBocC90c2F2b3JpdGUuaHRtbA,,/product/470/form_key/4BR7w0TqeeO9AC0g/')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
var bla = jQuery('#prod_id').val();
jQuery(".pi_" + bla).mouseover(function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).mouseout(function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
But Iam getting only data of first product on mouseover. Its not working for rest of products

Answer 1

Looks like you are executing the above block of code in a loop, once per each product. In that case the problem is jQuery('#prod_id').val(); it will always return the value of first element with id prod_id.
In your case you don't have to do that, you can
jQuery(function ($) {
$('.prod .product-image').hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
});

Answer 2

There is a much, much easier way to do this:
jQuery(document).ready(function() {
jQuery(".product-image").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
Demo: JSBin

Answer 3

You can use each() function in jQuery
NOTE: Instead of using id="prod_id", use class, i.e class="prod_id". Since you told that the div is dynamically created it is using the same id attribute
Now loop the product div on ready function
jQuery(document).ready(function() {
jQuery('.prod').each(function(){
var bla = jQuery('.prod_id').val();
jQuery(".pi_" + bla).on('mouseover',function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).on('mouseout',function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
});
You can checkout this jQuery each()

Answer 4

Ashi,
try using
var bla = jQuery(input[id*='prod_id']).val();
instead of
var bla = jQuery('#prod_id').val();
This will give you all the hidden inputs so loop all of them and bind the mouseover event.
For example:
jQuery(input[id*='prod_id']).each(function(){
var bla = jQuery(this).val();
//carry out your logic..
// you can use jquery().live('mouseover'function(){}) for dynamically created html
});
Hope this will work!!
Cheers!!

Answer 5

function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
http://jsfiddle.net/roXon/dJgf4/