在php中生成唯一的div ID来为其分配JavaScript

Question

I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:

<div id="item-size" class="item-size">
    <div class="view pic-transition"> 
        <figure id="ribbonnew" class="ribbonnew">
            <img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
        </figure>
            <img src="../images/woman.jpg" /> 
            <div class="mask"> 
                <h2>Title</h2> 
                <p>This is a test of a description for an item.</p> 
                    <a href="#" class="info">Read More</a> 
            </div> 
    </div>
</div>

I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out. My javascript code is:

$("#item-size").hover(function(){
       $('#ribbonnew').hide();
   },function(){
       $('#ribbonnew').show();
});

This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?

As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result

Answer 1

Remove all ids :

<div class="item-size">
    <div class="view pic-transition"> 
        <figure class="ribbonnew">
            <img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
        </figure>
        <img src="../images/woman.jpg" /> 
        <div class="mask"> 
            <h2>Title</h2> 
            <p>This is a test of a description for an item.</p> 
            <a href="#" class="info">Read More</a> 
        </div> 
    </div>
</div>

And use a dot . in your selectors to match elements by classes :

$(".item-size").hover(function(){
       $(this).find('.ribbonnew').hide();
   },function(){
       $(this).find('.ribbonnew').show();
});

For your extra question, you can use a parameter in the hide and show jquery methods for animation :

$(this).find('.ribbonnew').hide(400);

Edit : if the html is inserted dynamically, try event delagation instead :

$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
    $(this).find('.ribbonnew').toggle(400);
});

Answer 2

(if you really want to use ids)

Generate a unique id using the uniqid() function, and name all your item-size elements.

<?php
    $unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
    <div class="view pic-transition"> 
        <figure class="ribbonnew">
            <img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
        </figure>
            <img src="../images/woman.jpg" /> 
            <div class="mask"> 
                <h2>Title</h2> 
                <p>This is a test of a description for an item.</p> 
                    <a href="#" class="info">Read More</a> 
            </div> 
    </div>
</div>

Then, match all elements with that unique id as part of their ids.

$("*[id^='<?=$unique_id?>']").hover(function(){
   $(this).find('figure.ribbonnew').hide();
},function(){
   $(this).find('figure.ribbonnew').show();
});