修改jQuery javascript以触发：选中而不是：hover – image swap
当用户将鼠标hover在图像上时，我有一个很棒的jQuery交换图像。 看看下面的代码来看看它。
它使用mouseenter和mouseleave 。
我想修改它，以便在:checked特定输入/标签时触发图像交换。
你可以在这里看到我的演示页面：
http://sofzh.miximages.com/javascript/标签。 选中一个图像后，一组图像将从黑白交换为其颜色版本。 我为每个图像都有两个文件（image_s.jpg和image_o.jpg）。
我使用:checked伪类进行一些过滤。 检查输入时，某些图像保持完全opacity而其他图像则降低到opacity:0.1
在将输入检查为颜色后，我只想要保持完全不透明度的图像。
所以基本上我想在javascript中说：每当输入是:checked在#container swap _s.jpg中用_o.jpg 。
任何帮助都会很棒。
更新1： 澄清：演示中没有发生图像交换。 检查输入时，仅更改opacity 。 除了不透明度的变化，我想要一个图像交换。 默认情况下，所有图像都是黑白图像，当选择输入时，所选图像将从黑白变为彩色（通过图像交换）。
更新2：简单地说，我希望所有图像都是黑白的，直到用户点击其中一个过滤标签（打印，网页，字体等）。当点击标签时，未过滤图像的不透明度会降低，保持完全不透明度的滤镜图像会换成彩色图像。
更新3：我似乎无法得到以下答案为我工作。 如果它完成了工作，我愿意放弃输入/：checked /伪类过滤技术。 此外，我工作测试会帮助我很多（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); }); });
我认为有一种更简单的方法可以在没有伪类的情况下实现所需的效果。
您可以为每个链接包装图像一个类和id，并使用CSS为每个链接声明bg图像。 然后将每个输入绑定到一个链接，并使用.hover()和/或.hover() .click() ，改变CSS，从而改变bg图像。
就像是：
/* 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多function性和SEO中使用
可能会对您有所帮助，或者如果您使用HTML5，则
。
目前你似乎错过了你的图像上的imgover类，并且他们的src是错误的（ _e而不是_s ），所以hover / swap根本不起作用。
为了开始，我通过执行来解决这个问题
$('#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图像组id，然后检查是否#select-type-[id]了相应的输入#select-type-[id] （或#select-type-all -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事件），但它完成了工作。