一个页面上有多个图片库

Question

我用缩略图创建了一个小图像库。每次我将鼠标悬停在给定的颜色上，主窗口中的图像就会变成具有这种颜色的图像（实际上，我希望彩色图像被替换为我放在那里的图像的不同颜色变化）。

我想做的是在我的页面上放不止一个这样的图库。问题是，如果我添加另一个库，所有内容都会重复。我希望避免为每个库创建css和jquery代码。有什么办法可以做到这一点吗？

此外，最初我希望大图像仅在单击彩色缩略图时显示，而不是悬停在上方，但当我使用click（）而不是mouseover（）时，图像会“闪烁”并消失。我做错了什么？

下面是我的代码：

CSS

.g-wrap {
    width: 250px;
    margin: 0;
    padding: 0;
}
.g-image {
    width: 250px;
    height: 159px;
    position: relative;
}
.g-image img {
    display: none;
    position: absolute;
    width: 250px;
    height: 159px;
    border: none;
}
.g-colors {
    margin: 0 auto;
}
.g-colors a {
    display: block;
    width: 24px;
    height: 24px;
    float: left;
}
.clearfix {
    float: none;
    clear: both;
}
/*Color palette*/
.purple {background-color: #7d278a;}
.beige {background-color: #b8b596;}
.gray {background-color: #5a5b5d;}
.blue {background-color: #5388d4;}

HTML

<div class="g-wrap">
<div class="g-image">
<a href=""><img src="http://imageshack.us/a/img89/4650/purplew.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img18/6574/beigekq.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img526/2198/grayw.jpg" /></a>
<a href=""><img src="http://imageshack.us/a/img849/6161/blueye.jpg" /></a>
</div>
<div class="g-colors">
<a href="" title="purple" class="purple"></a>
<a href="" title="beige" class="beige"></a>
<a href="" title="gray" class="gray"></a>
<a href="" title="blue" class="blue"></a>
</div>
<div class="clearfix"></div>
</div>

jQuery

$(document).ready(function(){
    var totalWidth = 0;
    $(".g-colors").children().each(function() {
    totalWidth = totalWidth + $(this).width();
    $(".g-colors").css('width',totalWidth);
});
    });
$(document).ready(function(){
    $(".g-image img").eq(0).css('display','block')
    $(".g-colors a").each(function(){
        $(this).mouseover(function(){
        var x = $(this).index();
        $(this).closest(".g-image img").hide();
        $(this).closest(".g-image img").eq(x).show();
        });
        });
    });

Answer 1

首先，我认为你的JS代码中有一个错误。尝试将以下输出添加到控制台：

console.log($(this).closest(".g-image img").length);

$(this).closest(".g-image img").hide();
$(this).closest(".g-image img").eq(x).show();

对我来说，它打印0。这意味着jQuery元素集是空的。事实上，我认为你需要这样写（根据你的HTML结构）：

var imgs = $(this).closest('.g-wrap').find('.g-image img');
imgs.hide();
imgs.eq(x).show();

其次，为了避免重复整个代码，你只需要写一些更聪明的代码：）例如，将你放在$（文档）.准备（...）；中的内容包装在一个单独的函数中。该函数应该接受一个DOM元素，并对其进行一些操作，以用库功能认可它，也就是说，该函数应该将一些事件处理程序附加到相应的“. g-颜色a”元素（与您在示例中已经做的完全相同）...然后，您可以将函数应用于每个库DOM元素，仅此而已。像这样的东西：

function makeGallery(gal)
{
   var totalWidth = 0;
   $(".g-colors > a", gal).each(function() {
      totalWidth = totalWidth + $(this).width();
      $(".g-colors").css('width', totalWidth);
   });


   $(".g-image img", gal).eq(0).css('display','block');

   $(gal).on('mouseover', '.g-colors > a', function() {
      var x = $(this).index();

      var imgs = $('.g-image img', gal);
      imgs.hide();
      imgs.eq(x).show();
   });
}

$(function () {
   makeGallery($('.g-wrap')[0]);
});