修改jQuery javascript以在：checked而不是：hover—；图象掉换

我有一个很棒的jQuery，当用户在图像上悬停时，它可以交换图像。请查看下面的代码以查看它

它使用

mouseenter

和

mouseleave

我想修改它，以便在特定输入/标签被选中时触发图像交换

您可以在此处看到我的演示页面：

为了给你一些背景知识，我有4个输入/标签。选中其中一个后，一组图像将从黑白切换为彩色版本。每个图像有两个文件（image_.jpg和image_o.jpg）

我正在使用

：checked

伪类进行一些过滤。当检查输入时，一些图像保持完整的

不透明度

，其他图像降低到

不透明度：0.1

我只希望在检查输入后保持完全不透明度的图像是彩色的

基本上我想用javascript说： 无论何时输入

：在
#容器中选中
，
将
美国jpg
与
\u o.jpg
交换

任何帮助都会很好

更新1:
澄清：
演示中没有图像交换。检查输入时，
不透明度
刚刚更改。除了不透明度的变化，我想一个图像交换。默认情况下，所有图像都是黑白的，当选择输入时，所选图像将从黑白变为彩色（通过使用图像交换）

更新2:
简单地说，我希望所有图像都是黑白的，直到用户单击其中一个过滤标签（打印、网页、字体等）。单击标签时，未过滤的图像的不透明度将降低，保留完全不透明度的过滤图像将切换为彩色图像

更新3:
我似乎无法得到下面的答案为我工作。我愿意放弃input/：checked/伪类过滤技术，如果它完成了任务的话。另外，我认为工作测试对我有很大帮助（JSFIDLE）

以下是图像交换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);
    });
});

目前，您似乎缺少图像上的
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图像组id
，然后检查是否选中了相应的输入
#选择类型-[id]
（或
#选择类型全部
-input）


哎哟，我现在明白了，你希望直接通过过滤触发交换。为此，请尝试以下方法：

$(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
事件），但它完成了任务。
我认为没有伪类，有一种更简单的方法可以实现您想要的效果

您可以为包装图像的每个链接指定一个类和id，并使用CSS为每个链接声明bg图像。然后将每个输入绑定到一个链接，并使用
.hover（）
和/或
。单击（）
，更改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)));

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） 提供的代码使您有机会避免使用输入。除非您使用输入来收集数据，否则使用
，或者如果您使用的是HTML5，则使用
，可能对JavaScript的多功能性和SEO都有好处
 什么不起作用？您的演示似乎如您所解释的那样工作。演示中没有图像交换。检查输入时，
不透明度
刚刚更改。除了不透明度的变化，我想一个图像交换。默认情况下，所有图像都是黑白的，当选择输入时，所选图像将从黑白变为彩色（通过使用图像交换）。嗯，代码似乎不起作用。我更新了我的演示网站。JavaScript没有为
#照片img
注入CSS，所以我手动将其放入其中。我还将图像文件名更改为正确的名称。有什么想法吗？它现在没有任何效果，因为它是在加载文档其余部分之前运行的，所以
$（'.imgover'）
与任何内容都不匹配。将其包装在
$（function（）{…}）中
将其延迟到DOM完成加载之后。我会更新帖子来说明。啊，谢谢！现在我想弄清楚图像的奇怪比例。彩色的比例略为垂直。此外，还有一个
img
被注入到锚定标签中，因此现在每个锚定标签中都有两个图像。不确定这是否是有意的。如果是，每个锚点是否可能只有一个
img
？把
\u s
换成
\u o
？由于某些原因，在页面加载时，一些图像开始是彩色的。此外，我认为一些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