需要帮助冷凝Jquery

时间:2013-08-16 20:11:02

标签: jquery

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

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

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

2 个答案:

答案 0 :(得分: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);
});

答案 1 :(得分:0)

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

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