使用多个id和类实现jQuery的图像翻转效果

Question

我正在建立一个相册，希望实现这样的功能：当用户悬停在一张图片上时（比如说这是一张苹果的照片），页面上所有其他苹果的图片也显示它们的“悬停”状态。

非常感谢您的帮助，提前感谢您的时间！

- allison w

Answer 1

您可以将图片的“类型”添加为类。例如，苹果将是：

``````

<img src='' class='apple fruit red' />

您可以拥有任意数量的空格分隔类。

然后添加以下处理程序：

$(".apple").mouseover(function() {
   $(".apple").addClass("overState");
});

您需要在CSS中定义overState。当鼠标移出时，您必须删除该类。

- kgiannakakis

---

是的，这是正确的 - 尽管您需要使用$(".apple")而不是$("apple")（后者缺少表示类的句点）。 - Mark Bell

Answer 2

所以每张图片都有一些标签（例如：“苹果”，“红色”，“大”），当你将鼠标悬停在大红苹果上时，你希望所有其他苹果、大物体和红色物体都会亮起来吗？

正如kgiannakakis建议的那样，我会将这些数据放入图像的class属性中——唯一的区别是我会为每个类添加前缀，以便您不会与页面上的其他类发生冲突。

<img src="the-big-red-apple.jpg" class="tagged tag-big tag-red tag-apple" />

我还添加了一个名为“tagged”的额外类，这样你就可以将标记的照片与导航图像或其他内容区分开来。

$('img.tagged')
    .each(function() {
        var thisClasses = this.className.split(/s+/); // array of classes.
        var search = [];
        for (var i = 0; i < thisClasses.length; ++i) {
            if (thisClasses[i].substr(0, 4) == "tag-") {
                search.push("." + thisClasses[i]);
            }
        }
        $(this).data("tags", search.join(","));  // ".tag-big,.tag-red,.tag-apple"
    })
    .hover(function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .addClass("highlight")
        ;
    }, function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .removeClass("highlight")
        ;
    })
;

这段代码的作用是首先循环遍历所有标记过的图像，并计算出每个图像上的标记，将其存储到该元素的data()中。这意味着我们只需要执行一次，而不是每次都要执行。

然后它为每个标记过的图像添加一个hover事件，以查找与该图像任何标记匹配的内容并添加“highlight”类。同样，当鼠标移出时，它会删除该类。

- nickf

Answer 3

如果这些是链接（锚标签），您不需要使用jQuery来完成此操作。您可以在CSS中使用:hover。

a.apple:hover img {
  /* whatever you want to change here */
}

编辑：不用理我。这不会同时更改页面上的所有苹果元素。这就是我晚上瞌睡时浏览 Stack Overflow 的后果。

- sliderhouserules

---

你显然没有仔细阅读问题。Allison问如何在悬停在一个苹果图像上时改变所有苹果图像的状态... - James

@JimmyP假设所有苹果图片都包含在具有类别为apple的<a>标记中，这将起作用。您可以将:hover应用于img标记，但显然不支持IE。 - Ian Oxley

你说得对，我阅读了那个但是在回复时错过了它。虽然谢谢你的讽刺评论。 - sliderhouserules

没关系滑块，我支持你。因为不对那个可恶的人撒泼，所以点个赞。 :) - Paolo Bergantino

“讽刺”的评论现在已被删除，只是为了给那些在事实之后阅读这些内容的人提供背景。 - sliderhouserules

Answer 4

更改图像源

这种方法实际上会以统一的方式更改图像源，而不仅仅是将类应用于它们。

function swapImageGroup(imgSelector,suffix){
if (suffix == null) {suffix = "-hover";}
//imgSelector is the jQuery selector to use
//both imgSelector and suffix must be strings
$(selector).hover(
   function() {
      $(selector).each(function(){
      //store ".jpg" or ".png" or whatever as fileExtension
      var fileExtension = $(this).attr("src").substr($(this).attr("src").lastIndexOf("."));
      //replace something like ".jpg" with something like "-hover.jpg",
      //assuming suffix == "-hover"
      $(this).attr("src", $(this).attr("src").replace(fileExtension, suffix + fileExtension));
    });
    },
    function() {
      $(selector).each(function(){
      //chop off the end of the filename, starting at "-hover" (or whatever)
      //and put the original extension back on
      $(this).attr("src", $(this).attr("src").split(suffix + ".").join("."));
      });
    }
);
}

你可以像这样使用该函数：

swapImageGroup("img.apple");

或者

swapImageGroup("img.foo","-active");

- Nathan Long