jquery - 减少 jQuery 代码行数，避免不必要的重复

Question

我希望能够减少以下代码中的重复，当您单击编号链接时，该代码会更改图像源以及 div 的背景图像。

我在想，既然我以相同的方式对变量和选择器进行了编号(1、2、3...)，我可以用更少的行重写点击功能部分，以避免每次更改数字时都必须更改它图像？也许点击函数可以得到它自己的类(例如2)并将其应用到其他行？

图像(可以是任意数量)

var image1 = 'Home.jpg';
var image2 = 'About.jpg';
var image3 = 'Contact.jpg';

点击功能(目前重复覆盖上面所有图片)

$('.1').click(function() {
   $("#image").attr('src', image1);
   $('#center').css('background', 'url(' +  image1 + ') no-repeat center top');
});
$('.2').click(function() {
   $("#image").attr('src', image2);
   $('#center').css('background', 'url(' +  image2 + ') no-repeat center top');
});
$('.3').click(function() {
   $("#image").attr('src', image3);
   $('#center').css('background', 'url(' +  image3 + ') no-repeat center top');
});

HTML

<a href="#" class="1">Option 1</a>
<a href="#" class="2">Option 2</a>
<a href="#" class="3">Option 3</a>

您可以在此处查看正在运行的代码:http://carolineelisa.com/zack/

任何有关使其更小且更易于更新的建议将不胜感激!

Answer 1

var images = ['Home.jpg', 'About.jpg', 'Contact.jpg'];

$.each(images, function(index, image) {
  var imageIndex = index + 1; 
  $('.' + imageIndex).click(function() {
    $("#image").attr('src', image);
    $('#center').css('background', 'url(' +  image + ') no-repeat center top');
  });
});

您可能还想在附加点击处理程序之前调用 $.append() 为每个图像动态创建 HTML。如果您选择生成 HTML 服务器端，那么您将需要找到一种方法来避免在客户端和服务器端重复图像数组。