更好的 JQueryish 方式或 CSS 精灵

发布于 2024-10-18 09:15:24 字数 1039 浏览 5 评论 0原文

我有一个包含五张图像的水平菜单。这 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 方式以更好的方式做到这一点，

谢谢

原文

I have a horizontal menu of five images. All of these 5 images have active and grayed state. When a particular image is active the rest 4 need to be grayed out. Similarly for the other images.

I did it in jquery and that too the code is not so optimized and good. It is like this

    $("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
     });

How can I do it in a better way using CSS sprites or a more compact jqueryish way,

Thank You

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏别ゝ 2024-10-25 09:15:24

使用循环：

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

Use a loop:

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

回复收藏 0 原文