Javascript 使用多个ID和类的jQuery滚动

我正在建立一个照片库，我想做的是，当用户翻过一张图片（就这个问题而言，这是一张苹果图片）时，页面上所有其他苹果图片也会显示其“结束”状态

---

我们将非常感谢您的任何帮助，并提前感谢您的时间

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

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

您需要在CSS中定义夸大。在mouseout上，必须删除该类。

如果这些是链接（锚定标记），则不需要jQuery来执行此操作。您可以在CSS中使用：hover

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

---

编辑：别理我。这不会同时更改页面上的所有apple元素。这就是我在晚上这么晚睡觉的时候阅读得到的结果。

所以每个图像都有很多标签（例如：“苹果”、“红色”、“大”），当你把鼠标移到大红苹果上时，你想让所有其他的苹果、大东西和红色东西都亮起来吗

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

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

我还添加了一个名为“taged”的额外类，这样你就可以从导航图像或其他任何东西中分辨出你的标记照片

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

$（'img.taged'）
.each（函数（{
var thisClasses=this.className.split（/s+/）；//类数组。
var搜索=[]；
对于（变量i=0；i

这样做的最初目的是循环遍历所有标记的图像，找出每个图像上的标记，并将其存储到该元素的数据（）中。这意味着我们只需要做一次，而不是每次

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

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

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");

或

---

是的，这是正确的-尽管您需要使用$（“.apple”）而不是$（“apple”）（后者缺少表示类的句点）。您显然没有正确阅读问题。Allison询问，当只有一个苹果图片悬停在上面时，如何更改所有苹果图片的状态…@JimmyP假设所有苹果图片都包含在一个带有apple类的标记中，那么这就行了。你可以将：hover应用到img标签上，但是对它的支持显然不会扩展到IE。你是对的，我读到了，只是在回答时错过了它。谢谢你的冷嘲热讽。没关系，我支持你+1.感谢你不是一个混蛋。：）“snide”评论现在被删除了，只是为了给那些事后阅读这些东西的人提供上下文。

swapImageGroup("img.apple");

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