全局定義的jQuery變量，但未定義的日志記錄

Question

我正在制作類似於Amazon之類的網站上的產品圖像查看器（將鼠標懸停在圖像上，它看起來更大-單擊圖像縮略圖，將主圖像設置為單擊的圖像）。

除了背景信息，我在控制主圖像的函數之外設置了兩個全局變量。 發生奇怪的事情是，變量僅在代碼執行過程中的某個點被定義，然后變為“未定義”。

這是我的標記：

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

當我查看頁面時，所有操作都可以在鼠標懸停時按預期進行，除了原始圖像路徑會將其自身重置為undefined（我可以在控制台中看到此行為）。 對於可能導致這種情況發生的原因，我完全感到困惑。

任何有關使該變量自身不起作用的建議都將受到贊賞。

[編輯]這是帶有我的示例的jsfiddle，顯示了完全相同的行為： https ://jsfiddle.net/htxxnfuy/

Answer 1

您檢查.active圖片是否正確找到。 如果沒有匹配的選擇器，則結果是長度為0的元素的集合。

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

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

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

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

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

演示版