Question

这是我想要实现的目标。在此页http://livinginspace.staging.wpengine.com/上有四个共享按钮。前三个工作非常好，但是houzz仅适用于一个图像。我想要实现的是根据当前幻灯片动态更改按钮的href属性，因此当您按下它时，您正在共享按下按钮时屏幕上的幻灯片。正如我所注意到的，你需要在按钮的href内部进行更改是图像网址。另外，唯一改变的东西（至少我已经注意到）是滑块div中li元素的z-index。这是我的步骤： //首先我用z-index 20

定位li

var currLi = $('li').filter(function() {
return $(this).css('z-index') == 20;
});

//然后我定位li里面的图像的网址

var imgUrl = $(currLi + '>div.slotholder>img').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");

总而言之：

jQuery(document).ready(function($) {

var currLi = $('li').filter(function() {
return $(this).css('z-index') == 20;
});

var imgUrl = $(currLi + '>div.slotholder>img').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");
});

我对jquery很新，我不记得我尝试过的所有事情，但我已尽我所能，但仍然无效。此外，我注意到，当我将代码放在页脚的最末端时，它根本不起作用（尝试发送警报，只是为了测试），但是当它在页眉或页脚开头时（在所有其他之前）脚本）警报工作，但我相信问题可能是我尝试定位的实际li元素尚未创建。请帮帮我吧，我花了这么多时间试图解决这个问题。非常感谢

Answer 1

要获得z-index为20的“li”，你可以这样做，这将获得“li”中的图像URL：

var imgUrl;
$('li').each(function() {
    if($(this).css('zIndex') == 20) {
        imgUrl = $(this).find('img').attr('src');
    }
});

------------------------------------- EDIT --------- ------------------------------------

我已经创建了一个JSFiddle，成功获取了一个图像src，然后将它放在一个标签上。见here

下面的代码（包括我已经找到的代码，用于查找z-index为20的图像的imgURL）。显然，我在我的示例中使用了两个按钮，但仅仅是为了测试最初未定义href，设置href，然后再次检查它。

$('#btn').click(function() {
    //Get image with z-index = 20
    $('li').each(function() {
        if($(this).css('zIndex') == 20) {
            imgUrl = $(this).find('img').attr('src');
        }
    });
    $('.a').attr('href', imgUrl);
});

$('#btn2').click(function() {
    alert($('.a').attr('href'));
});

通过z-index定位幻灯片并分配类

1 个答案: