Question

我有这个链接：

catalog_product_index_price_final_temp

在悬停事件上，我需要使用price从另一个类更改final_price的URL。我现在尝试尝试此方法，但是不起作用：

catalog_product_index_price_final_temp

这个脚本给我这个结果：

min_price

我需要这个：

catalog_product_index_price_final_temp

有什么建议吗？谢谢

Answer 1

您的语法对于获取attr data-src是错误的，请使用此

var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');
jQuery('.wp-show-posts-inner').on('mouseover',function() {    
      jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});
jQuery('.wp-show-posts-inner').on('mouseleave',function() {    
      jQuery('.home-banner .bg').css({'background-image': "url()"});
});

.bg{height:100px;width:100px;}
.wp-show-posts-inner{height:100px;width:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-banner">
<div class="bg">

</div>
</div>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner (Hover on me)</div>

Answer 2

您的代码有三个问题。

在使用.attr()之前，应先使用选择器。因此，请使用$(this).attr('data-src')
在.css()的第二个参数的末尾还有应删除的另外'
css background-image属性应包装在url()

因此您的代码应更改为

$('.wp-show-posts-inner').hover(function() {    
    $('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});

$('.wp-show-posts-inner').hover(function() {    
  $('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});

.bg {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner</div>
<div class="home-banner">
  <div class="bg">bg</div>
</div>

用属性值更改背景图像

2 个答案: