javascript - 按 z 索引定位幻灯片并分配类别

Question

这就是我想要实现的目标。在此页 http://livinginspace.staging.wpengine.com/有四个共享按钮。前三个工作得很好，但 houzz 仅适用于一张图像。我想要实现的是根据当前幻灯片动态更改按钮的 href 属性，因此当您按下它时，您将共享按下 houzz 按钮时屏幕上的幻灯片。正如我注意到的，您需要在按钮的 href 内更改的只是图像 url。另外，唯一改变的(至少我注意到)是 slider div 内 li 元素的 z-index。这是我的步骤://首先我的目标是z-index 20的li

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

//然后我定位该 li 内图像的 url

var imgUrl = $(currLi + '>div.slotholder>img').attr('src');

//最后我把url放入houzz按钮

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

------------------------------------编辑--------- ------------------------------------------------

我制作了一个 JSFiddle，它成功获取图像 src，然后将它的 href 放在 a 标签上。查看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'));
});