在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的絲帶和通過JavaScript我想要當鼠標懸停並恢復正常時，鼠標移出要隱藏的色帶。 我的JavaScript代碼是：

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

當然，這僅適用於第一個元素，因此我想我需要將ID分配給“ item-size” div？ 如何執行此操作並創建將鼠標懸停綁定到每個div的javascript（如何傳遞我創建的div的大小，以便可以將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();
});