Question

我正在建立一个照片库，我想做的是让用户滚动图像（让我们说这个问题的目的是一张苹果的图片），所有其他图像页面上的苹果也显示出他们的“过度”状态。

非常感谢任何和所有帮助，并提前感谢您的时间！

Answer 1

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

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

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

然后添加以下处理程序：

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

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

Answer 2

因此每张图片都有许多标签（例如：“apple”，“red”，“big”），当你将鼠标放在大红苹果上时，你想要所有其他的苹果，大物和红色的东西都要点亮吗？

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

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

我还添加了一个名为“已标记”的额外课程，以便您可以通过导航图像或其他任何方式告知您标记的照片。

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

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

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

Answer 3

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

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

编辑：不理我。这不会同时更改页面上的所有Apple元素。这就是我在昏昏欲睡的时候仔细阅读SO的原因。

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

jQuery翻转使用多个ID和类

4 个答案:

更改图像源