Question

我使用 photoset-grid ：http://stylehatch.github.io/photoset-grid/来tumblr博客。代码：

<body>
<div class="wrapper">
{block:IndexPage}
    <ul id="posts">
        {block:Posts}
            <li>
                {block:Photoset}
                    <div class="photoset-grid" data-layout="{PhotosetLayout}" data-id="photoset{PostID}" style="visibility: hidden;">
                        {block:Photos}
                            <img src="{PhotoURL-500}"
                            {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes}
                            {block:Caption}alt="{Caption}"{/block:Caption} />
                        {/block:Photos}
                    </div>
                    {block:Caption}
                        {Caption}
                    {/block:Caption}
                {/block:Photoset}
            </li>
        {/block:Posts}
    </ul>
{/block:IndexPage}
</div>

<script type="text/javascript">
$('.photoset-grid').photosetGrid({
  highresLinks: true,
  rel: $('.photoset-grid').attr("data-id"),
  gutter: '10px',

  onComplete: function(){
    $('.photoset-grid').attr('style', '');
    $('.photoset-grid a').colorbox({
      photo: true,
      scalePhotos: true,
      maxHeight:'90%',
      maxWidth:'90%'
    });
  }
});
</script>
</body>

问题：对于不同的图片集，不要更改'photosetGrid'中的'rel'参数。它在网站上的外观如何：

第一篇文章：

<div class="photoset-grid" data-layout="122" data-id="photoset58370010471" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 390px;">
<a href = "bla0.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%; ">

第二篇文章：

<div class="photoset-grid" data-layout="122" data-id="photoset58327675703" style="" data-width="600">
<div class="photoset-row cols-1" style="margin-bottom: 10px; clear: left; display: block; overflow: hidden; height: 468px;">
<a href = "bla1.jpg" class = "photoset-cell highres-link cboxElement" rel = "photoset58370010471" style = "float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%;">

参数'data-id'在更改时，参数'rel'in保持不变。

如何使参数'rel'在'data-id'中变化？

也就是说，不同帖子中的图片集具有不同的标识符，而不是集合。

谢谢！

+++ +++ Desicion

<script type="text/javascript">
        $.each($('.photoset-grid'), function() { 
            $(this).photosetGrid({
              highresLinks: true,
              rel: $(this).attr('data-id'),
              gutter: '10px',

              onComplete: function(){
                $('.photoset-grid').attr('style', '');
                $('.photoset-grid a').colorbox({
                    photo: true
                });
              }
            }); 
        });
    </script>

Answer 1

问题来自于您同时将photosetGrid（）函数调用到多个选定元素的事实。您需要利用jQuery的each（）函数来迭代元素。

如何将'rel'参数更改为Photoset-grid？

1 个答案: