一页上有多个图片库

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();

其次，为了避免重复整个代码，您只需要编写一些更智能的代码:) 例如，将您放在 $(document).ready(...); 中的内容包装起来； em> 在一个单独的函数中。该函数应该接受一个 DOM 元素并对其进行一些操作以支持它与图库功能，即该函数应该将一些事件处理程序附加到相应的“.g-colors 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]);
});