Измените jQuery javascript для включения: флажок вместо: hover - обмен изображениями

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 swap _s.jpg с _o.jpg.

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

ОБНОВЛЕНИЕ 1: уточнить: В демоверсии не происходит обмена изображениями. opacity просто изменяется при проверке входа. В дополнение к изменению непрозрачности, я хотел бы обмен изображениями. По умолчанию все изображения будут черно-белыми, и при выборе входа выбранные изображения будут меняться с черно-белого на цветное (с помощью обмена изображениями).

ОБНОВЛЕНИЕ 2: Проще говоря, я хотел бы, чтобы все изображения были черно-белыми, пока пользователь не нажмет одну из меток фильтра (печать, веб, гарнитуры и т. Д.). При нажатии на метку нефильтрованные изображения уменьшатся. в непрозрачности и отфильтрованные изображения, которые остаются полностью непрозрачными, будут заменены на цветное изображение.

ОБНОВЛЕНИЕ 3: Я не могу получить ответы ниже, чтобы работать на меня. Я готов отказаться от техники фильтрации input /: checked / pseudo-class, если она выполнит свою работу. Кроме того, мне очень помог бы рабочий тест (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 для пользователей с различными скоростями соединения. E.g.:

/* 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, оборачивая абсолютно позиционированные ссылки относительно позиционированными элементами. E.g.:

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 add, проверяющей это перед выполнением подкачки.

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

---

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

$(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 для каждого изображения), но оно выполняет свою работу.