更好的 JQueryish 方式或 CSS 精灵

Posted 2023-02-16

【中文标题】更好的 JQueryish 方式或 CSS 精灵

【英文标题】：Better JQueryish way or CSS sprites

【发布时间】：2011-02-20 07:46:17

【问题描述】：

我有一个包含五个图像的水平菜单。所有这 5 个图像都处于活动状态和灰色状态。当特定图像处于活动状态时，其余 4 个需要变灰。对于其他图像也是如此。

我是在 jquery 中完成的，而且代码也不是那么优化和好。是这样的

    $("document").ready(function()
  $("#imageidone").click(function() 
         $("#imageidone").attr("src","/path to image_active");
         $("#imageidtwo").attr("src","/path to image_grayed");
         $("#imageidthree").attr("src","/path to image_grayed");
         $("#imageidfour").attr("src","/path to image_grayed");
         $("#imageidfive").attr("src","/path to image_grayed");
   );
      $("#imageidtwo").click(function() 
        $("#imageidone").attr("src","/path to image_grayed");
        $("#imageidtwo").attr("src","/path to image_active");
        $("#imageidthree").attr("src","/path to image_grayed");
        $("#imageidfour").attr("src","/path to image_grayed");
        $("#imageidfive").attr("src","/path to image_grayed"); );
and so on for imageidthree, imageidfour, imageidfive
     );

我怎样才能以更好的方式使用 CSS sprites 或更紧凑的 jqueryish 方式来做到这一点，

谢谢

【参考方案1】：

使用循环：

var all = ['#imageidone', '#imageidtwo', '#imageidthree', '#imageidfour', '#imageidfive'];

$.each(all, function(selector, idx) 
    $(selector).click(function() 
        $(all.join()).attr('src', '/path to image_grayed');

        $(selector).attr('src', '/path to image_active');
    );
);

【讨论】：

这里idx是ID吗，怎么调用这个函数，因为我需要把4张图片的状态改成灰色，1张改成active。你的 $(all.join()).attr('src', '/path to image_grayed');只有一张灰度图像的路径

使用 sprite 将使此代码正常工作并为您提供更好的网络性能。

在这种情况下我是否也需要使用 jquery，实际上我不确定如何在精灵图像上添加 onclick 事件处理程序。

【参考方案2】：

你可以做 css sprites，

制作包含所有状态的大图像并在 css 中创建类，使用 jquery 可以更改类名。

由于您总是只加载一张图片，因此性能会很好。

【讨论】：

如何放置点击事件并改变其他4张图片的状态，我需要这样做多少次？