Question

我想要创建的是一个图像，根据在该图像下方点击的缩略图而变化。我已经在网上找了很多看起来很棒的缩略图库观众，但效果很好，但我需要的只是“简单”。

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

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>

Jquery的：

    $("#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次（每次只调整缩略图链接），如果有一个更整洁（和更短）的方式实现这一点我会更快乐。

非常感谢Wayne

Answer 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);
});

Answer 2

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

$('a').click(function(){
 $("#image").attr("src",$(this).attr("href"));
})

需要帮助冷凝Jquery

2 个答案: