使用jquery获取存储在块中的图像源答案

【问题标题】：Getting source of image stored in block by using jquery使用jquery获取存储在块中的图像源
【发布时间】：2014-11-04 00:28:12
【问题描述】：

我正在为我的网页制作一个滑块，我正在使用 jquery 的名为“Cycle”的插件。我在访问滑块中使用的图像源时遇到了问题。这很难解释，所以这是我的“head”部分的代码：

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
    $('#slider').before('<ul id="pager">').cycle({ 
        fx: 'scrollHorz',
        speed: 900,
        timeout: 5500,
        pause: 1,
        pager: '#pager',

        pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="120" height="65" /></a></li>'; 
        } 
    });
</script>

这里是html部分：

<div id="slider_container">
    <div id="slider">
        <div class="items">
            <img src="1.jpg"/>
            <div class="info">
                <h2>Tile Nr. 1</h2>
            </div>
        </div>
        <div class="items">                         
            <img src="2.jpg"/>
            <div class="info">
                <h2>Tilte Nr. 2</h2>
            </div>
        </div>
    </div>
    <div id="pager">

    </div>
</div>

在我的slider div 中，我想显示块，每个块都包含图像和一些标题，但在pager div 中，我只想显示来自slider 中使用的块的图像。我确定问题出在第三个 javascript 中的 slide.src 表达式中。我应该如何更改该表达式以获取存储在适当items 块中的图像源？

【问题讨论】：

标签： javascript jquery html css jquery-cycle

【解决方案1】：

你能设置一个 jsFiddle 来获取你需要的 jquery 文件吗？

我猜slide.src 不是你想要的。如果slide 是对DOM 中某个元素的引用，那么您可以像这样访问它的'source' 属性：$(slide).attr('src')

更新：

原来 'slide' 是包含 div，所以我们需要这个来代替：

$(slide).find('img').attr('src')

【讨论】：

尝试了你的建议，但没有成功。在我的例子中，幻灯片是 div，按“项目”分类。我想访问存储在这些 div 中的图像源
抱歉，您所说的“设置 jsFiddle”是什么意思？
是的，那么这段代码应该可以工作。如果没有，请告诉我。 jsfiddle.net 是一种流行的网络代码共享方式。您可以快速向人们展示问题所在，他们可以快速进行更改并向您展示他们的工作。就像我用你的代码做的一样（虽然它显然找不到 jquery 循环文件或图像文件）：jsfiddle.net/n16k6cab
我尝试了您的代码，但它似乎仍然无法正常工作。这是我的 jsfiddle 链接：jsfiddle.net/n16k6cab/19.
嗯，好的。所以传递给函数的“幻灯片”是包含“img”元素的“div”。所以要访问“img”src，我们这样做：$(slide).find('img').attr('src')这是更新的小提琴：jsfiddle.net/n16k6cab/59

【解决方案2】：

当您检查 pagerAnchorBuilder-function 中的参数 slide 时，您会发现 slide 是一个具有类 items 的 div 元素，并且包含 img 元素作为第一个子元素。所以你可以像这样访问 img 和它的 src 属性：

pagerAnchorBuilder: function(idx, slide) {
    var source = $('img', slide).attr('src');
    return '<li><a href="#"><img src="' + source + '" width="120" height="65" /></a></li>'; 
}

还有一些其他的写法，结果都是一样的：

var source = $(slide).find('img').attr('src');
// or in native js
var source = slide.querySelector('img').getAttribute('src');
var source = slide.querySelector('img').src;
var source = slide.firstElementChild.src

【讨论】：