jQuery在firefox中工作，但在Chrome中不工作

Question

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...

Answer 1

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.

Source