Question

我制作的产品图片查看器类似于亚马逊等网站（您将鼠标悬停在图片上，看起来更大 - 点击图片缩略图，然后将主图像设置为点击的内容）。

除了背景信息之外，我在控制主图像的函数之外设置了两个全局变量。有些奇怪的事情发生在变量只被定义到代码执行中的某一点，然后它们变成了＃34;未定义＆＃34;。

这是我的标记：

<div id="product-image-gallery">
   <div id="product-image-holder" style="background-image: url('http://example.com/images/main-image.jpg');">My Main Image
   </div>

   <ul>
     <li class="product-thumb">
       <img src="http://example.com/images/image-1.jpg"/>
     </li>
     <li class="product-thumb">
       <img src="http://example.com/images/image-2.jpg"/>
     </li>
   </ul>
</div>

在jQuery中，我将原始图像和图像背景路径存储在两个全局变量中，然后定义改变主图像容器以显示正确图像的函数。这是我的jQuery：

var $originalImage = $('#product-image-holder');
var $originalImageSrc = $originalImage.css('background-image');

$('#product-image-gallery ul li.product-thumb').click(function () {
    $('li.product-thumb.active').removeClass('active');
    $(this).addClass('active');
});

$('#product-image-gallery ul li.product-thumb').hover(
//mouseenter event
    function () {
        var $imageChange = $(this).find('img');
        var $imageChangeSrc = 'url(\'' + $imageChange.attr('src') + '\')';
        $originalImage.css("background-image", $imageChangeSrc);
},
//mouseleave event
function () {
    var $activeImage = $('#product-image-gallery ul li.product-thumb.active img');
    var $activeImageSrc = 'url(\'' + $activeImage.attr('src') + '\')';

    if($(this).hasClass('active')){
        return;
    }
    else if ($activeImage != '') {
        $originalImage.css("background-image", $activeImageSrc);
    }
    else {
        $originalImage.css("background-image", $originalImageSrc);
    }
});

当我查看页面时，所有在鼠标悬停时都按预期工作，除了原始图像路径重置为未定义（我可以在控制台中看到此行为）。我完全不知道是什么原因导致这种情况发生。

非常感谢任何关于什么会使这个变量不被设置的建议。

[编辑]这是一个jsfiddle与我的例子，显示完全相同的行为： https://jsfiddle.net/htxxnfuy/

Answer 1

您检查是否找不到.active图片。如果没有与选择器匹配的话，Result是一个长度为0的元素集合。

if ($activeImage.length) { // <-- this line
    $originalImage.css("background-image", $activeImageSrc);
}

＆＃13;

var $originalImage = $('#product-image-holder');
var $originalImageSrc = $originalImage.css('background-image');

$('#product-image-gallery ul li.product-thumb').click(function () {
    $('li.product-thumb.active').removeClass('active');
    $(this).addClass('active');
});

$('.product-thumb').hover(
//mouseenter event
function () {
    var $imageChange = $(this).find('img');
    var $imageChangeSrc = 'url(\'' + $imageChange.attr('src') + '\')';
    $originalImage.css("background-image", $imageChangeSrc);
},
//mouseleave event
function () {
    var $activeImage = $('li.active img');
    var $activeImageSrc = 'url(\'' + $activeImage.attr('src') + '\')';

    if($(this).hasClass('active')){
        return;
    }
    else if ($activeImage.length) { // <-- this line
        $originalImage.css("background-image", $activeImageSrc);
    }
    else {
        $originalImage.css("background-image", $originalImageSrc);
    }
});

＆＃13;

#product-image-holder {
  height: 50px;
  width: 50px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="product-image-gallery">
   <div id="product-image-holder"
        style="background-image: url('http://placehold.it/50x50');">
     My Main Image
   </div>

   <ul>
     <li class="product-thumb">
       <img src="http://placehold.it/52x52"/>
     </li>
     <li class="product-thumb">
       <img src="http://placehold.it/51x51g"/>
     </li>
   </ul>
</div>

＆＃13;

Answer 2

您正在针对空字符串检查可能的元素集合。在尝试找出jQuery选择器是否返回任何项目（或许多项目）时，您可以测试它的length属性。

我还减少了你的代码：

$(function () {
    // To make your code a bit easier to understand, use $ to prefix
    // only variables that represent a jQuery selector.
    var $originalImage = $('#product-image-holder');
    var originalImageSrc = $originalImage.css('background-image');
    var containerSelector = '#product-image-gallery ul li.product-thumb';
    var $container = $(containerSelector);

    // You can attach as many event handlers as you need in just
    // one go. Also, it's better to use mouseenter and mouseleave
    // instead of hover.
    $container.on({ click: function () {
            $('li.product-thumb.active').removeClass('active');

            $(this).addClass('active');
    }, mouseenter: function () {
        var $imageChange = $(this).find('img');
        var imageChangeSrc = 'url(\'' + $imageChange.attr('src') + '\')';

        $originalImage.css('background-image', imageChangeSrc);
    }, mouseleave: function () {
        var $activeImage = $(containerSelector + '.active img');
        var activeImageSrc = 'url(\'' + $activeImage.attr('src') + '\')';

        // I would review the necessity of this entire check.
        if ($(this).hasClass('active')) {            
        } else if ($activeImage.length > 0) { 
            // If there's at least one element coming
            // from the selector above.           
            $originalImage.css('background-image', activeImageSrc);
        } else {           
            $originalImage.css('background-image', originalImageSrc); 
        }
    }});
});

Demo

jQuery变量全局定义但是记录为未定义

2 个答案: