0

我要创建的是一个图像，该图像会根据在该图像下方单击的缩略图而变化。我在网上查看并发现许多具有出色效果的精美缩略图画廊查看器，但我所需要的只是“简单”。

我根据我在网上找到的适合我目的的元素拼凑了一些脚本，

HTML：

    <img id="image" src="/largeImage1.jpg"><br>
    <a id="link1" href="/largeImage1.jpg">picture 1</a><br>
    <a id="link2" href="/largeImage2.jpg">picture 2</a><br>
    <a id="link3" href="/largeImage3">picture 3</a>

查询：

    $("#link1").click(function() {
      $("#image").fadeOut(50, function() {
        $("#image").attr("src",$("#link1").attr("href"));
      }).fadeIn(500);
      return false;
    });
    $("#link2").click(function() {
      $("#image").fadeOut(50, function() {
        $("#image").attr("src",$("#link2").attr("href"));
      }).fadeIn(500);
      return false;
    });
    $("#link3").click(function() {
      $("#image").fadeOut(50, function() {
        $("#image").attr("src",$("#link3").attr("href"));
      }).fadeIn(500);
      return false;
    });

好的，这就是我所知道的（文本链接需要更改为缩略图，并且需要添加一些 css - 我很熟悉）。我被困在 jquery 上（不是最喜欢的主题） - 有没有一种方法可以将重复的 jquery 压缩下来。最终，我将有 12 个缩略图区域的某个地方，尽管我很高兴输入相同的 6 行 jquery 12 次（每次只需调整缩略图链接），如果有更整洁（更短）的方式实现这一点我会更快乐。

非常感谢，韦恩

4

2 回答 2

1

给你的链接一个类，使选择它们更容易。将 click 事件添加到该类的所有元素。用于this获取被点击的元素并从那里找到它的来源：

$('.thumb-link').click(function(e) {
    e.preventDefault();
    var src = $(this).attr('src');
    $("#image").fadeOut(50, function() {
        $("#image").attr("src", src);
    }).fadeIn(500);
});
于 2013-08-16T20:22:31.410 回答
0

假设您在页面上没有任何其他锚标记

$('a').click(function(){
 $("#image").attr("src",$(this).attr("href"));
})
于 2013-08-16T20:32:22.720 回答