Question

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

我想做的是在我的网页上放置多个此类图库。问题是，如果我添加另一个库，一切都是重复的。我想避免为每个画廊创建css和jquery代码。有没有办法让这种情况发生？

另外，最初我希望大图像仅在点击颜色缩略图时显示，而不是在我使用click()而不是mouseover()时使用.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;}，图像＆＃34;闪烁＆＃34;并消失。我做错了什么？

以下是我的代码：

CSS

<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>

HTML

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

的jQuery

{{1}}

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（...）; 在一个单独的函数中。该函数应接受 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]); });

一页上有多个图库

1 个答案: