Javascript 隐藏除第一个没有CSS的图像以外的所有图像

我正在用一个小小的“颜色过滤”功能来显示产品图像

问题是，在您将鼠标悬停在颜色框上之前，这两个图像都是可见的，因为此时我的Javascript接管并显示/隐藏当前图像/颜色（请参见底部的代码）

我正在使用一个名为Slimsy to Umbraco 7的插件，该插件使cropUrl具有响应性，但如果我在

.categoryImage

容器上放置一个

显示：none

，则该插件不起作用，它必须在插件中

我需要的是不在每个

.categoryImage

容器上使用

显示：none

，但是以某种方式隐藏除第一个以外的所有图像，以便插件可以确定宽度/高度/它需要的任何内容

我的javascript:

$(".frameColor").each(function () {
    var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
    categoryImage.first().show();

    if ($(categoryImage).length > 1) {
    $(this).on('mouseover', function () {
        var color = $(this).data('color').replace('#', '');

 $(".frameColor").removeClass("active");
        $(this).addClass("active");

        $(categoryImage).hide().filter(function () {
            return $(this).data('frame-color') === color;
        }).show();
    });
}
else {
    $(this).hide();
}

@foreach (var bikeColor in images)
                {
                    string color = bikeColor.GetPropertyValue("frameColor");
                    string[] colorSplit = color.Split(',');

                    if (colorSplit.Length == 1)
                {
                    <div class="frameColor" data-color="#@color" style="background-color:#@colorSplit[0]"></div>
                }
                else
                {
                    <div class="frameColor" data-color="#@color" style="background-image:linear-gradient(-30deg, #@colorSplit[0] 0%, #@colorSplit[0] 50%, #@colorSplit[1] 50%, #@colorSplit[1] 60%);"></div>
                }
            }

}))

我的相框颜色：

$(".frameColor").each(function () {
    var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
    categoryImage.first().show();

    if ($(categoryImage).length > 1) {
    $(this).on('mouseover', function () {
        var color = $(this).data('color').replace('#', '');

 $(".frameColor").removeClass("active");
        $(this).addClass("active");

        $(categoryImage).hide().filter(function () {
            return $(this).data('frame-color') === color;
        }).show();
    });
}
else {
    $(this).hide();
}

@foreach (var bikeColor in images)
                {
                    string color = bikeColor.GetPropertyValue("frameColor");
                    string[] colorSplit = color.Split(',');

                    if (colorSplit.Length == 1)
                {
                    <div class="frameColor" data-color="#@color" style="background-color:#@colorSplit[0]"></div>
                }
                else
                {
                    <div class="frameColor" data-color="#@color" style="background-image:linear-gradient(-30deg, #@colorSplit[0] 0%, #@colorSplit[0] 50%, #@colorSplit[1] 50%, #@colorSplit[1] 60%);"></div>
                }
            }

@foreach（图像中的var bikeColor）
{
字符串颜色=bikeColor.GetPropertyValue（“frameColor”）；
字符串[]colorSplit=color.Split（'，'）；
如果（colorSplit.Length==1）
{
}
其他的
{
}
}

要将

.frameColor

中除第一个以外的所有对象作为目标，请在

$中执行每个（）循环

$(".frameColor:not(:first)").each(function () {});

并且不使用
display:none隐藏它们您可以使用
不透明度：0或<代码>可见性：隐藏
你好，Michael，使用不透明度或可见性将导致空容器内无任何内容，这是一个显示：无将非常有用。@s-works如何将
不透明度设置为
0
“导致空容器内无任何内容”？因为在
.categoryImage
容器中有一个图像。该图像为容器提供了一个宽度和高度。@S-works
css
opacity
属性值不会影响元素的
css
width
或
height
属性值。另外请注意，链接页面中的
元素在元素处未设置
宽度
或
高度
属性。您能否在问题中包含呈现的
html
片段？@guest271314请尝试转到提供的链接，并使用两幅图像检查其中一款产品。如果在该元素上添加
不透明度：0
，它不会消失。