jQuery 不适用于同一类别的第二项

Question

以下代码在 Wordpress 站点的存档帖子上创建不同颜色的渐变叠加层。 jQuery 检查自定义帖子类型的类别字段中的值(字母指定)，并根据那里的内容分配不同的覆盖。如果两次使用相同的字母指定，则覆盖仅适用于第一个。具有相同字母的后续帖子不会覆盖。我是 JQuery 的新手，不知道为什么。

这是 html:

<div class="box">
[wpbb-if post:featured_image]
<div class="fl-post-image">
    [wpbb post:featured_image size="large" display="tag" linked="yes"]
</div>
[/wpbb-if]

    <div class="category">
        [wpbb post:custom_field key='category']
    </div>

    <div class="label">
        [wpbb post:custom_field key='label']
    </div>

</div>

这里是 jQuery(目前所有叠加层都是相同的灰色渐变):

jQuery(document).ready(function($){
    var redoverlay = $(".category:contains('D')").parents().eq(1);
    $(redoverlay).hover(function(){
        $(this).toggleClass('overlay red',500);
    });
    var greenoverlay = $(".category:contains('F')").parents().eq(1);   
    $(greenoverlay).hover(function(){
        $(this).toggleClass('overlay green',500);
    });
    var blueoverlay = $(".category:contains('C')").parents().eq(1);   
    $(blueoverlay).hover(function(){
        $(this).toggleClass('overlay blue',500);
    });
    var orangeoverlay = $(".category:contains('L')").parents().eq(1);   
    $(orangeoverlay).hover(function(){
        $(this).toggleClass('overlay orange',500);
    });
});

还有 CSS:

    /* Just changes the cursor to a pointer when hovering over an image */
.box:hover{
    cursor: pointer;
}

/* Makes the letter appear on hover */
.box:hover .category{
    opacity: 1;
    transition: .5s;
}

/* Makes the title appear on hover */
.box:hover .label{
    opacity: 1;
    transition: .5s;
}

/* Speed of overlay */
.overlay{
    position: relative;
    transition:opacity 0.5s ease;
}

/* Controls the position of the graduated overlay */
.overlay:after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
}

/* Controls the opacity of the overlay on hover and makes the overlay 'click-transparent' so clicking will hit the linked image underneath and not the overlay, which would result in not going anywhere */
.overlay:hover:after{
    opacity: .75;
    pointer-events: none;
}

/* Controls the graduated tone of the overlays. This can be reproduced by going here: https://www.cssmatic.com/ and select Gradient Generator. Currently all are set to grey  */
.red:after{
    background: rgba(204,204,204,0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc', GradientType=0 );
    background: linear-gradient(to bottom, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,0)), color-stop(71%, rgba(204,204,204,1)), color-stop(100%, rgba(204,204,204,1)));
    background: -moz-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
}

.blue:after{
    background: rgba(204,204,204,0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc', GradientType=0 );
    background: linear-gradient(to bottom, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,0)), color-stop(71%, rgba(204,204,204,1)), color-stop(100%, rgba(204,204,204,1)));
    background: -moz-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
}

.green:after{
    background: rgba(204,204,204,0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc', GradientType=0 );
    background: linear-gradient(to bottom, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,0)), color-stop(71%, rgba(204,204,204,1)), color-stop(100%, rgba(204,204,204,1)));
    background: -moz-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
}

.orange:after{
    background: rgba(204,204,204,0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc', GradientType=0 );
    background: linear-gradient(to bottom, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,0)), color-stop(71%, rgba(204,204,204,1)), color-stop(100%, rgba(204,204,204,1)));
    background: -moz-linear-gradient(top, rgba(204,204,204,0) 0%, rgba(204,204,204,1) 71%, rgba(204,204,204,1) 100%);
}

Answer 1

.eq(1) 将数组限制为特定索引处的唯一值。所以你只有一位 parent 而不是所有 parent 。 https://api.jquery.com/eq/

如果我明白你想要什么，我相信你需要的是:

// red overlays
$(".category:contains('D')").parents(".box").hover(
    function(){
        $(this).addClass('overlay');
        $(this).addClass('red');
    }, 
    function(){
        $(this).removeClass('overlay');
        $(this).removeClass('red');
    });
});