Question

网站网址：http://livinginspace.staging.wpengine.com/。我想要实现的是创建一个脚本，该脚本将自动获取当前显示在屏幕上的图像的src属性（来自插件rev滑块）并将此图像放入houzz共享按钮（元素的href属性）中），当屏幕上的图像显示时，houzz链接的href将会改变（中间有一点图像url，我想动态改变，因为滑块继续）。这是我现在的代码：

jQuery(document).ready(function($) {
$(window).load(function() {
    var listImgs = $('#rev_slider_1_1 ul li div img');

    var imgUrl;

    $(listImgs).each(function() {
        if($(this).css('opacity') == '0') {
            imgUrl = $(this).attr('src');
        }
    });

$('a.sb_network_button.houzz').attr("href", "http://www.houzz.com/imageClipperUpload?link=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F&amp;source=button&amp;hzid=4036&amp;imageUrl=" + imgUrl + "&amp;title=Product+Title+as+it+will+be+seen+inside+Houzz&amp;ref=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F");

});
});

我注意到图像的不透明度发生了变化，所以我试图通过不透明度来定位它们，但是当我把opacity == 1（我应该这样做）时，imgUrl返回undefined，而opacity == 0则返回src第三张图片（总共有三张）。我假设，页面加载时所有图像的不透明度为0，这就是为什么它返回undefined然后滑块开始为图像，一个接一个地分配不透明度：1。我真的想不出一个解决方法，而且我对jQuery很新，所以我真的需要帮助。所有答案都将非常感谢。

Answer 1

这有用吗？ Fiddle

$(function() {

  var listImgs = $('#rev_slider_1_1 img');

  $(listImgs).each(function() {
    if($(this).css('opacity') == '1') {
       $(this).addClass('active');
    }
    if($(this).css('opacity') < '1') {
       $(this).removeClass('active');
    }
  });

  var imgUrl = $('.active').attr('src');

  $('.sb_network_button.houzz').attr("href", "http://www.houzz.com/imageClipperUpload?link=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F&amp;source=button&amp;hzid=4036&amp;imageUrl="+imgUrl+"&amp;title=Product+Title+as+it+will+be+seen+inside+Houzz&amp;ref=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F");

});

在滑块中定位src属性图像并将其放入链接的href中

1 个答案: