Question

我通过php（事先未知的数字）生成以下代码片段，它们都是我的＆＃39; item-container＆＃39;中的包装器。 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>

我在这些＆＃39; item-size＆＃39;的 SOME 上生成了一个功能区。 div和通过javascript我希望当鼠标悬停时隐藏功能区并在鼠标移出时恢复正常。我的javascript代码是：

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

这当然只适用于第一个元素，所以我想我需要将ID分配给＆＃39; item-size＆＃39; div？我该怎么做并创建将鼠标悬停在每个div上的javascript（如何传递我创建的数量的大小，以便我可以将ID从0添加到大小）？

作为一个额外的问题，还有一种方法可以使色带淡入淡出并逐渐消失吗？ .fadeOut（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);
});

Answer 2

（如果你真的想使用id）

使用uniqid()函数生成唯一ID，并命名所有item-size元素。

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

然后，将具有该唯一ID的所有元素作为其ID的一部分进行匹配。

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

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

2 个答案: