Question

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

我在想，因为我以相同的方式对变量和选择器进行编号（1,2,3 ......）我可以用更少的行重写click函数部分，以避免每次更改数字时都要更改它图像？也许click函数可以获得自己的类（例如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服务器端，那么您将需要找到一种方法来避免在客户端和服务器端复制图像阵列。

Answer 2

试试这个：

$('a').click(function() {
   //Should get the class-numbers of the clicked link:
   var number = $(this).attr('class');

   $("#image").attr('src', image+class);
   $('#center').css('background', 'url(' +  image+class + ') no-repeat center top');
});

减少jQuery代码行，不必要的重复

2 个答案: