javascript - 在 php 中生成唯一的 div id 以将 javascript 分配给它

Question

我通过 php 生成了以下代码片段(预先不知道数字)，它们都是我的“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>

我在这些“元素大小”div 的 SOME 上生成一个功能区，并通过 javascript 我希望在鼠标悬停时隐藏功能区，并在鼠标移开时恢复正常。 我的 javascript 代码是:

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

这当然只适用于第一个元素，所以我想我需要为“item-size”div 分配 ID？我该怎么做并创建将鼠标悬停绑定(bind)到每个 div 的 javascript(如何传递我创建的数量的大小，以便我可以将 ID 从 0 添加到大小)？

多问一句，有没有办法让色带慢慢淡入淡出？ .淡出(1000)；没有提供预期的结果

Answer 1

删除所有 ID:

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

并在选择器中使用点 . 来按类匹配元素:

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

对于您的额外问题，您可以在 hide 中使用一个参数和 show用于动画的 jquery 方法:

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

编辑:如果 html 是动态插入的，请尝试使用事件延迟:

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