javascript - 根据子项更改 href 值

Question

我想根据子背景图像值更改 href 值，但是当我更改背景图像值时，所有 href 根据第一个 div 采用相同的值。

    <div class="row margin-bottom-20">                          
       <div class="col-md-3 margin-bottom-20">                     
            <a href="" class="over">
                <div class="fill bg-change" style="background-image:url(images/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg);"></div>
            </a>
    </div><!-- /.col-md-3 col -->
    <div class="col-md-3 margin-bottom-20">
       <a href="" class="over">
          <div class="fill bg-change" style="background-image:url(images/J3URHssSQyqifuJVcgKu_Wald.jpg);"></div>
       </a>
    </div><!-- /.col-md-3 col -->
    <div class="col-md-3 margin-bottom-20">
       <a href="" class="over">
          <div class="fill bg-change" style="background-image:url(images/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg);"></div>
       </a>
    </div><!-- /.col-md-3 col -->
    <div class="col-md-3 margin-bottom-20">
       <a href="" class="over">
           <div class="fill bg-change" style="background-image:url(images/J3URHssSQyqifuJVcgKu_Wald.jpg);"></div>
       </a>
    </div><!-- /.col-md-3 col -->
    </div><!-- /.row -->
<script type="text/javascript">
  $('.over').attr('href',function(e){
     var bg_img = $('.fill').css("background-image");
     bg_img = bg_img.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
     return bg_img;
});
</script>

Answer 1

我建议:

$('.over').prop('href', function () {
    return $(this).find('.fill').css('background-image').replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
});

这会迭代每个 .over 元素，并将 href 属性更新为 background-image 属性中找到的已处理字符串.

值得注意的是，我还没有验证正则表达式的结果，只是从您自己发布的代码中复制了该部分(假设它似乎有效，或者在您的问题中没有提到，因为不是 工作)。

引用文献:

JavaScript:
• String.prototype.replace() .
• jQuery:
  • prop() .