Question

我正在尝试将附加到帖子的精选图像设置为WordPress中帖子页面上的Backstretch jQuery的来源。

我能够成功创建多个变量，并通过functions.php：http://cl.ly/image/2i2m3H1W2z25（来自HTML源代码的屏幕截图）将这些变量的'src'参数设置为Posts的特色图像的URL。

在backstretch-set.js中，我有：

jQuery(function( $ ){

var i = 0;

$( ".post-image" ).each(function() {

    var BackStretchImg_temp = 'BackStretchImg' + i;

    // console.log(BackStretchImg_temp);

    $(this).backstretch([BackStretchImg_temp.src],{duration:3000,fade:750});

    i++;
});
});

但.post-image divs没有获得变量'src'的值。 http://cl.ly/image/41422N1w2i33

我试图将BackStretchImg0的'src'值设置为第一次出现.post-image的后伸图像，BackStretchImg1的第二次出现.post-image的'src'值等等。

感谢任何帮助。

Answer 1

这是我的第一篇文章，如果我没有正确地做事，请原谅我！

我使用Coda快速将这个概念与HTML结合在一起。

我在想要图像进入的div中添加了一个数据属性。这可以在循环中添加。

样式表

.container {
    width: 1000px;
    background-color: tan;
    margin: 0 auto;
}
.post {
    width: 200px;
    margin: 0 auto;
}
.entry-image {
    display: block;
    position: relative;
    width: 100%;
    height: 200px;
}

的JavaScript

jQuery(function( $ ){
    $( ".container .post .entry-image" ).each( function(){
        var post_image = $(this).data( "entryimage" );
        console.log( "post_image: "+ post_image );
        $(this).backstretch([BackStretchImg]=post_image,{duration:3000,fade:750});
    });
});

我有测试代码：

<div class="container">

<article class="post post-1">
    <header class="entry-header">
        <h2 class="entry-title">Entry Title</h2>
        <div class="entry-image" data-entryimage="http://placehold.it/350x150&text=post-1.png"></div>
    </header>
    <div class="entry-content">
        <p>This is the entry</p>
    </div>
    <footer class="entry-footer">
        <div class="entry-meta">Meta</div>
    </footer>
</article>

<article class="post post-2">
    <header class="entry-header">
        <h2 class="entry-title">Entry Title</h2>
        <div class="entry-image" data-entryimage="http://placehold.it/350x150&text=post-2.png"></div>
    </header>
    <div class="entry-content">
        <p>This is the entry</p>
    </div>
    <footer class="entry-footer">
        <div class="entry-meta">Meta</div>
    </footer>
</article>

</div>

尝试在Backstretch中设置多个数组变量的值

1 个答案: