Изменить jQuery javascript для включения: проверено вместо: hover - image swap

Question

У меня есть отличный кусок jQuery, который меняет изображение, когда пользователь наводил на изображение. Ознакомьтесь с приведенным ниже кодом, чтобы увидеть его.

Используется mouseenter и mouseleave.

Я хотел был бы изменить его так, чтобы смена изображения срабатывала, когда конкретный вход/метка :checked.

Вы можете увидеть мою демонстрационную страницу здесь:

http://test.davewhitley.com/not-wp/static_folder/index.php

Чтобы дать Вам некоторый фон, у меня есть 4 входа/метки. Когда один из них установлен, группа изображений будет заменена черно-белой на цветную. У меня есть два файла для каждого изображения (image_s.jpg и image_o.jpg).

Я использую псевдокласс для :checked, чтобы сделать некоторую фильтрацию. Когда вход проверен, некоторые изображения остаются заполненными opacity, а другие уменьшаются до opacity:0.1

Я хочу только изображения, которые остаются полной непрозрачностью после проверки ввода цвета.

Поэтому в основном я хочу сказать, что в JavaScript: Всякий раз, когда вход :checked в #container своп _s.jpg с _o.jpg.

Любая помощь будет отличной.

UPDATE 1: Для уточнения: Там нет изображения подкачки происходит в демо. opacity только что изменился при проверке ввода. В дополнение к изменению непрозрачности я хотел бы обмен изображениями. Все изображения будут по умолчанию черно-белыми, а когда выбран вход, выбранные изображения будут меняться от черного и белого до цвета (с помощью обмена изображениями).

UPDATE 2: Проще говоря, я хотел бы все изображения, чтобы быть черными и белыми, пока пользователь не нажмет на одном из фильтров этикеток (печать, Интернет, шрифты и т.д.) Когда метка щелкнуть, не отфильтрованные изображения будут уменьшаться в непрозрачности, а отфильтрованные изображения, которые остаются полной непрозрачностью, поменяются на цветное изображение.

ОБНОВЛЕНИЕ 3: Я не могу получить ответы ниже, чтобы работать для меня. Я готов отказаться от метода фильтрации ввода /: проверенного/псевдокласса, если он выполнит свою работу. Кроме того, мой рабочий тест мне очень помог (JSfiddle).

Вот своп изображения JavaScript:

$('.imgover').each(function() { 

    var std = $(this).attr("src"); 
    var hover = std.replace("_s", "_o"); 
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({ 
     position:'absolute' 
    }); 
    $(this).mouseenter(function() { 
     $(this).stop().fadeTo(200, 0); 
    }).mouseleave(function() { 
     $(this).stop().fadeTo(200, 1); 
    }); 
}); 

Answer 1

Я думаю, что есть простой способ добиться желаемого эффекта без псевдокласса.

Вы можете дать каждой ссылке, обертывающей изображение классом и идентификатором, и используя CSS, объявите изображение bg для каждой ссылки. Затем привяжите каждый вход к ссылке и используя .hover() и/или .click(), измените CSS и, таким образом, изображение bg.

Что-то вроде:

<!-- HTML --> 
<div id="inputsContainer"> 
    <input id="trigger1 /> 
</div> 
<div id="linkElementsContainer"> 
    <a id="triggered1" class="state1"></a> 
</div> 
<!-- End HTML --> 

/* CSS */ 
#triggered1.state1 { 
    background: url('yoursite/images/triggered1_s.jpg') 50% 50% transparent no-repeat; 
} 

#triggered1.state2 { 
    background: url('yoursite/images/triggered1_o.jpg') 50% 50% transparent no-repeat; 
} 

// jQuery 
// shorten the names of all of these, please, they're long for 
// purposes of illustrating concept 

function changeClassOfAssociatedLink(inputElement) { 
    // get id of input element 
    var inputIdString = inputElement.attr("id"); 
    // regex to get numbers in id attr of input element 
    var inputIdStringWithNoLetters = inputIdString.replace(/\D/g,''); 

    // define id string of triggered link element you're looking for 
    var linkIdString = '#triggered' + inputIdStringWithNoLetters; 
    // find the link element with the id string you defined above 
    var linkElement = jQuery(linkIdString); 

    if(linkElement.hasClass('state1')) { 
     linkElement.attr('class', 'state2'); 
    } 

} 

jQuery('#inputsContainer input').hover(changeClassOfAssociatedLink($(this))); 

jQuery('#inputsContainer input').click(changeClassOfAssociatedLink($(this))); 

Через несколько способов, чтобы получить фантазии/эффективным с ним:

1) Используйте спрайты, чтобы убедиться, что все изображения загружаются в то же время, обеспечивая последовательный UX к пользователей с разной скоростью соединений. Например:

/* CSS */ 

#triggered1.state1 { 
    background: url('yoursite/images/sprites.jpg') 0 0 transparent no-repeat; 
} 

#triggered1.state1 { 
    background: url('yoursite/images/sprites.jpg') 0 -250px transparent no-repeat; 
} 

/* Moves the background image "down" 250px */ 

2) При использовании спрайтов с конечным количеством входных/пар изображений или одинакового размера изображений, добавлять некоторое ослабление анимации для ваших переходов путем определения положения черно-белых и цветных изображений в ваших спрайтов образ. ПРИМЕЧАНИЕ. Для этого потребуется некоторое базовое позиционирование CSS, обертывание абсолютно позиционированных ссылок с относительно позиционируемыми элементами. Например:

function changeImages(linkElement, topP) { 
      var linkElementClass = linkElement.attr("class"); 
    linkElement.animate({ 
     top: topP 
    }, { 
     duration: 500, 
     easing: 'easeInOutExpo', 
     complete: linkClassController(linkElement) 
    }); 
} 

function linkClassController(l) { 
    var linkClass = l.attr("class"); 

    if(linkClass == 'state1') { 
     l.attr('class', 'state2'); 
    } else { 
     l.attr('class', 'state1'); 
    } 
} 

jQuery('#inputsContainer input').hover(function() { 
    // get id of input element 
    var inputIdString = inputElement.attr("id"); 
    // regex to get numbers in id attr of input element 
    var inputIdStringWithNoLetters = idString.replace(/\D/g,''); 

    // define id string of triggered link element you're looking for 
    var linkIdString = '#triggered' + idString1WithNoLetters; 
    // find the link element with the id string you defined above 
    var l = jQuery(linkIdString); 

    var top = // define the top position 

    changeImages(l, top); 
}); 

// note, .toggleClass() could make provided code more efficient 
// this was a quick example 

3) Предоставленный код дает вам возможность уйти от использования входных данных. Если вы не собираете данные с использованием входов, вам может быть полезно как универсальность JavaScript, так и SEO для использования <ul>, или если вы используете HTML5, <nav>.

Answer 2

В настоящее время, кажется, вы пропустили imgover класс на изображениях и их src неправильно (_e вместо _s), поэтому парить/своп Безразлично» т работы вообще.

Просто, чтобы идти, я установил, что при выполнении

$('#photos img').attr('src','images/iso_s.jpg').addClass('imgover'); 

в консоли первой.

Затем повторно применять изображения с перестановкой код с изменениями, внесенными здесь:

$(function(){ 

    $('.imgover').each(function() { 

     var std = $(this).attr("src"); 
     var hover = std.replace("_s", "_o"); 
     $(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({ 
      position:'absolute' 
     }); 

     var $img = $(this); 
     function isActive(){ 
      // Regex for extracting the ID number for the image group type 
      var reg = /^(.*\s)?ff-item-type-(\d+)[^\d]*.*/; 
      var classes = $img.closest('li').attr('class'); 
      var id = reg.exec(classes)[2]; 
      console.log('Checking image with group id',id); 

      var found = $('#select-type-all, #select-type-'+id).filter(':checked').length; 
      console.log('Matching and checked input count:', found); 

      return found>0; 
     } 

     $(this).mouseenter(function() { 
      if (isActive()){ 
       $(this).stop().fadeTo(200, 0); 
      } 
     }).mouseleave(function() {   
      $(this).stop().fadeTo(200, 1); 
     }); 
    }); 
}); 

Это, кажется, работает. Обратите внимание, что по какой-то причине ч/б картинки слишком масштабны, вероятно, проблема с вашим CSS. Применяя следующие исправления, которые достаточно хорошо, чтобы увидеть подкачка работает как задумано:

$('#photos img').css('width','auto !important') 

Единственное изменение, которое я сделал в коде свопинга добавлял функция isActive добавить проверку того, что перед выполнением своп.

isActive извлекает I Group ID изображения из класса <li> своего родителя, а затем проверяет, является ли соответствующий вход #select-type-[id] (или #select-type-all -input) проверяется.

---

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

$(function(){ 

    $('#photos img').attr('src','images/iso_s.jpg').addClass('imgover'); 
    $('#photos img').css('width','auto !important') 

    $('.imgover').each(function() { 

     var std = $(this).attr("src"); 
     var hover = std.replace("_s", "_o"); 
     $(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({ 
      position:'absolute' 
     }); 

     var $img = $(this); 
     function isActive(){ 
      // Regex for extracting the ID number for the image group type 
      var reg = /^(.*\s)?ff-item-type-(\d+)[^\d]*.*/; 
      var classes = $img.closest('li').attr('class'); 
      var id = reg.exec(classes)[2]; 
      console.log('Checking image with group id',id); 

      var found = $('#select-type-'+id).filter(':checked').length; 
      console.log('Matching and checked input count:', found); 

      return found>0; 
     } 

     $('#container input').change(function(){ 
      if (isActive()){ 
       $img.stop().fadeTo(200, 0); 
      } else {   
       $img.stop().fadeTo(200, 1); 
      } 
     }); 
    }); 

}); 

Не самый эффективное и элегантное решение (связывание onchange события для каждого изображения), но он получает работу.