jQuery变量全局定义，但日志记录为未定义

我正在制作一个类似于亚马逊网站的产品图像查看器（你将鼠标悬停在一个图像上，它看起来更大——单击图像缩略图，它将主图像设置为单击的图像）

除了背景信息，我在控制主图像的函数之外设置了两个全局变量。奇怪的是，在代码执行过程中，变量只定义到某一点，然后它们就变成了“未定义的”

这是我的标记：

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

当我查看页面时，鼠标悬停时，所有操作都按预期进行，但原始图像路径将自身重置为未定义（我可以在控制台中看到这种行为）。我完全搞不清是什么原因导致了这种情况

任何关于如何使该变量本身未设置的建议都将不胜感激

[EDIT]下面是一个带有我的示例的JSFIDLE，显示了完全相同的行为：

---

检查是否未正确找到

.active

图像。结果是一个长度为0的元素集合，如果没有匹配的选择器

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

我的主要形象

您正在根据空字符串检查可能的元素集合。当试图确定

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

---

您的代码总是要经历

if

或

else if

条件，而不是

if

条件。如果忽略

if

条件，它实际上会工作吗？作为旁注，您正在使用

Javascript

操作变量。没有

jQuery

variable这样的东西。感谢您在这段代码中提供了非常有用的注释。我显然是Javascript和jQuery的新手，您的回答有助于说明最佳实践和代码清洁度。干杯没问题。我很高兴能帮上忙。

$(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); 
        }
    }});
});