Scrolling jQuery using multiple identifiers and classes

Question

I create a photo gallery, and what I would like to do is make the user turn the image over (say, for the purpose of this question, the image of an apple), all other apple images on the page also show their “over” state.

Any help would be greatly appreciated and thanks for your time in advance!

Answer 1

You can add a “type” of image as a class. For example, an apple would be:

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

You can have as many space-separated classes as you want.

Then add the following handler:

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

CSS overState. .

Answer 2

, (: "", "", "" ), , , , ?

kgiannakakis, - , -, .

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

, , , , (). , , .

hover , -, , "" " . .

Answer 3

( ), jQuery. : hover CSS.

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

: . . , , , , .

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

So you should use a function like this:

swapImageGroup("img.apple");

or

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