Reputation: 199
Can anyone tell me why the following code works in firefox but not chrome? to test this out on a page check out this page on my site and change the colors. Wanting to swap the images if a retina display is detected...
Here's my code:
jQuery('#pa_color').click(function(){
var monkey = jQuery('.jck-wt-images__image').attr('src')
if (monkey !== undefined) {
if (window.devicePixelRatio > 1) {
if (jQuery('.jck-wt-images__image').attr('src').contains('@2x')) {
}else{
jQuery('img.jck-wt-thumbnails__image, img.jck-wt-images__image').attr('src', function(index, attr) {
return attr.replace(/\.[^.]*$/, '@2x$&');
});
}
}
}
});
Also, I'd rather use .change instead of .click (so that it will work right on the mobile version of my site) but that didn't work at all...
Upvotes: 0
Views: 286
Reputation: 5683
I think this could be the issue - you misuse the .contains()
method here -
customjquery.js - Line 8
if (jQuery('.jck-wt-images__image').attr('src').contains('@2x')) {..}
What you should use is -
if (jQuery('.jck-wt-images__image').attr('src').indexOf('@2x') >= 0) {..}
What $.contains()
is really for -
The
$.contains()
method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply. Otherwise, it returns false. Only element nodes are supported; if the second argument is a text or comment node,$.contains()
will return false.
Upvotes: 1