JQuery ролловеры с использованием нескольких идентификаторов и классов - PullRequest
Новая
       21

JQuery ролловеры с использованием нескольких идентификаторов и классов

3 голосов
/ 18 декабря 2008

Я создаю фотогалерею, и я хотел бы сделать так, чтобы, когда пользователь переворачивал изображение (скажем, для целей этого вопроса это изображение яблока), все остальные изображения яблоки на странице также показывают их состояние «за».

Любая помощь будет принята с благодарностью, и спасибо за ваше время заранее!

Ответы [ 4 ]

5 голосов
/ 18 декабря 2008

Вы можете добавить тип изображения в качестве класса. Например, яблоко будет: 

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

Вы можете иметь столько классов, разделенных пробелами, сколько хотите.

Затем добавьте следующий обработчик: 

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

Вы должны определить в вашем CSS overState. При наведении мыши вы должны удалить класс.

1 голос
/ 19 декабря 2008

Таким образом, у каждого изображения есть несколько тегов (например, «яблоко», «красный», «большой»), и когда вы наводите мышку на большое красное яблоко, вы хотите, чтобы все другие яблоки, большие вещи и красные вещи загорелись до

Как предположил Кгианнакакис, я бы поместил эти данные в атрибут класса изображения - единственное отличие состоит в том, что я добавляю к каждому классу какой-то префикс, чтобы вы не конфликтовали с другими классами на своей странице. 

<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 , чтобы найти что-либо, совпадающее с любым из тегов этого изображения, и добавить класс «highlight». Аналогичным образом он удаляет класс при наведении мыши.

0 голосов
/ 20 декабря 2008

Изменить источник изображения

Этот метод фактически изменяет источники изображения единообразным способом, а не просто применяет к ним класс. 

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");
0 голосов
/ 18 декабря 2008

Если это ссылки (тег привязки), вам не нужен jQuery для этого. Вы можете использовать: hover в CSS. 

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

РЕДАКТИРОВАТЬ: игнорировать меня. Это не изменит все элементы apple на странице одновременно. Это то, что я получаю за просмотр ТАКОЙ ночью, когда я сплю.

...