修改jQuery javascript以在:check而不是:hover上触发—图像交换 [英] Modify jQuery javascript to trigger on :checked instead of :hover — image swap

问题描述

我有一个很棒的jQuery，当用户将鼠标悬停在图像上时会交换图像.查看下面的代码以查看它.

I have a great piece of jQuery that swaps an image when the user hovers on an image. Check out the code below to see it.

它使用mouseenter和mouseleave.

我想对其进行修改，以便在特定输入/标签为:checked时触发图像交换.

I would like to modify it so that the image swap triggers when a specific input/label is :checked.

您可以在此处查看我的演示页面:

You can see my demo page here:

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

为了给您一些背景知识，我提供了4个输入/标签.选中一个图像后，一组图像将从黑白交换到其彩色版本.每个图像都有两个文件(image_s.jpg和image_o.jpg).

To give you some background, I have 4 inputs/labels. When one is checked, a group of images will be swapped from black and white to their color version. I have two files for every image (image_s.jpg and image_o.jpg).

我正在使用:checked伪类进行一些过滤.选中输入后，某些图像会保持完整opacity，而另一些图像缩小为opacity:0.1

I am using the :checked pseudo class to do some filtering. When an input is checked, some images remain full opacity and other reduce to opacity:0.1

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

I want only the images that remain full opacity after checking the input to be color.

所以基本上我想在javascript中说: 只要输入是#container中的:checked，就将_s.jpg与_o.jpg交换.

So basically I want to say in javascript: Whenever an input is :checked within #container swap _s.jpg with _o.jpg.

任何帮助都会很棒.

更新1: 要澄清: 该演示中没有图像交换发生.选中输入时，仅更改opacity.除了更改不透明度外，我还希望进行图像交换.默认情况下，所有图像均为黑白，并且选择了输入后，所选图像将从黑白变为彩色(通过使用图像交换).

UPDATE 1: To clarify: There is no image swap happening in the demo. The opacity is just changed when an input is checked. In addition to the opacity change, I would like an image swap. All of the images would be black and white by default, and when an input is selected, the selected images would change from black and white to color (by using an image swap).

更新2: 简而言之，我希望所有图像都是黑白的，直到用户单击过滤器标签之一(打印，网页，字体等).单击标签时，未过滤的图像会降低处于不透明状态，则过滤后的图像仍保持完全不透明状态，将交换为彩色图像.

UPDATE 2: To put it simply, I would like all of the images to be black and white until the user clicks on one of the filter labels (print, web, typefaces, etc.) When a label is clicked, the non-filtered images will lower in opacity and the filtered images that remain full opacity will swap to a color image.

更新3: 我似乎无法获得以下答案为我工作.如果工作完成，我愿意放弃input/:checked/pseudo-class过滤技术.另外，我的工作测试对我有很大帮助(JSfiddle).

UPDATE 3: I can't seem to get the below answers to work for me. I am willing to abandon the input/:checked/pseudo-class filtering technique if it gets the job done. Also, I working test would help me a lot (JSfiddle).

这是图像交换javascript:

Here is the image swap 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);
    });
});

推荐答案

我认为，没有伪类，有一种更简单的方法来实现所需的效果.

I think there's a simpler way to achieve your desired effect without pseudo classes.

您可以为每个包装图片的链接提供一个类和ID，然后使用CSS为每个链接声明bg图片.然后将每个输入绑定到一个链接，并使用.hover()和/或.click()更改CSS，从而更改bg图像.

You could give each link wrapping an image a class and id, and using CSS declare the bg image for each link. Then tie each input to a link, and using .hover() and/or .click(), alter the CSS and thusly the bg image.

类似的东西:

<!-- 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)));

几种看中/高效的方法:

A couple ways to get fancy/efficient with it:

1)使用图像精灵来确保同时加载所有图像，从而为具有不同连接速度的用户提供一致的UX.例如:

1) Use image sprites to make sure all images load at the same time, providing a consistent UX to users with varying connections speeds. 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定位，并用相对定位的元素包装绝对定位的链接.例如:

2) If using sprites with a finite amount of input/image pairs or identically sized images, add some easing animation to your transitions by defining the positions of the black and white and color images within your sprites image. NOTE: this would require some basic CSS positioning, wrapping absolutely positioned links with relatively positioned elements. 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)提供的代码为您提供了摆脱使用输入的机会.除非您使用输入来收集数据，否则使用<ul>在JavaScript通用性和SEO中都可能会受益，或者如果使用HTML5，则在<nav>中使您受益.

3) The provided code gives you an opportunity to get away from using inputs. Unless you're gathering data using the inputs, it might benefit you in both JavaScript versatility and SEO to use a <ul>, or if you're using HTML5, a <nav>.

这篇关于修改jQuery javascript以在:check而不是:hover上触发—图像交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！