Question

好的，所以我有这个投资组合页面，我显示了几个缩略图，你可以按标签订购，所以例如这样：

<a href="#" title="year1" class="sort" onclick="reveal('year1');">year 1</a>

这很好用。但是，我的缩略图显示在一行三个，所以只有前两个应该有一个右边距，第三个没有边距。我使用PHP来做到这一点很好。

if ($result=$link->query($query)) {
    for ($i=1; $i <= $result->num_rows; $i++) {
    $row= $result->fetch_assoc();

    $id = $row['number'];
    $title = $row['title'];
    $bgthumbnail = $row['thumbnail'];


    if($i%3 == 0){                          
    echo "
    <div class=\"thumbnail\">
         <a href=\"portfoliodetail.php?id=$id\">
         <div class=\"thumbnailOverview noMargin\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
             <div class=\"latestWorkTitle\">$title</div>
         </div>
         </a>
    </div>
    ";

    } else {

    echo "
    <div class=\"thumbnail\">
        <a href=\"portfoliodetail.php?id=$id\">
        <div class=\"thumbnailOverview\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
            <div class=\"latestWorkTitle\">$title</div>
        </div>
        </a>
    </div>
    ";

    }

}  

$result->close();
}

但是，当我单击标记时，边距不会更新。因此，如果缩略图在概览中没有给出边距，因为它是行中的第三个，当它由于所选标记而首次显示时，它也没有收到边距。

当然这是因为没有“刷新”或其他东西，但我想知道是否有一种“简单”的方法来解决这个问题？要让PHP循环再次运行吗？

Answer 1

除非您的“标签”正在调用页面 - 以便重新执行php - 您可能希望查看javascript（或可能是ajax）来重新格式化布局。

根据缩略图的数量和标签的种类，您可以使用php为每个不同的过滤器标签创建一个div（带有相关的id和style =“”属性） - 包含该标签的缩略图（这样您就可以确保每个视图的布局都很好）。

即。重复上面的代码，每个视图都包含一个唯一的div标签。

使默认视图div可见（style =“display：block”），其他隐藏（style =“dsplay：none”）。

然后有一个在任何标签点击上执行的javascript函数。通过更改上面的样式值，这将使相关div可见，其余部分隐藏。

使用更多内存，但您在视图之间切换比重新加载更快。

尽管如此，我认为使用相对过滤器（取决于标签）调用页面更清晰，更具可扩展性，然后您可以更好地控制布局。

Answer 2

您必须通过javascript：

设置/删除noMargin类名

$('.year-clicker').click(function (event) {
    event.preventDefault();
    var year = $(event.currentTarget).data('year');
    $('.thumb').hide().removeClass('noMargin').filter('.year' + year).show();
    $('.thumb:visible').each(function (i, e) {
        if ((i + 1) % 3 == 0) {
            $(e).addClass('noMargin');
        }
    });
    return false;
});

试试这个jsfiddle http://jsfiddle.net/xgE3K/1/

单击类标记时如何进行PHP循环刷新

2 个答案: