CSSなしで1枚目の画像以外のすべての画像を非表示

Question

私はthis siteに取り組んでいます。商品画像に少し「カラーフィルタリング」機能が表示されています。

問題は、あなたがカラーボックスの上にマウスを置くそれまではその時点で私のJavascriptが引き継ぎやショー/現在の画像/色を（下のコードを参照）隠しているため、両方の画像が、表示されているということです。

slimsy to Umbraco 7というプラグインを使用していますが、cropUrlの応答はありますが、display: noneを.categoryImageコンテナに置くと動作しません。プラグイン内のものでなければなりません。

は、私はが各.categoryImageコンテナ上ませ使用display: 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> 
       } 
      } 

Answer 1

あなた$.each()ループの中で、あなたが

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

を行うことができますし、display: none;を使用せずに、それらを非表示にするには、最初のものを除いて.frameColorのすべてを対象としますあなたが使用することができますopacity: 0;またはvisibility: hidden;