Question

我正在使用Wordpress和ACF来创建一个图像库，当用户将鼠标悬停在图像上时，它会将其交换为数据库中的另一个图像。我似乎无法将其换回原始图像。我还收到错误：bkgd_bl未定义

HTML

<li 
    class="carousel-img" 
    data-alt-src="<?php the_sub_field('carousel_image_hover');?>" 
    style="background-image:url( <?php the_sub_field('carousel_image');?> )"
>

jQuery

jQuery(document).ready(function(e) 
{
    jQuery('#carousel a li').hover(function() 
    {
        var bkgd = "url('" + jQuery(this).attr('data-alt-src') + "')";
        var bkgd_bl = jQuery(this).css('background-image');
        jQuery(this).css("background-image", bkgd); //alert(bkgd_bl);

    }, function() 
    {
        jQuery(this).css("background-image", bkgd_bl);
    });
});

Answer 1

bkgd_bl是函数的本地;将其移出如下：

jQuery(document).ready(function(e) 
{
      var bkgd_bl = "";

    jQuery('#carousel a li').hover(function() 
    {
        var bkgd = "url('" + jQuery(this).attr('data-alt-src') + "')";
        bkgd_bl = jQuery(this).css('background-image');
        jQuery(this).css("background-image", bkgd); //alert(bkgd_bl);

    }, function() 
    {
        jQuery(this).css("background-image", bkgd_bl);
    });
});

jquery交换变量图像

1 个答案: