0

好的，所以我有这个投资组合页面，其中显示了几个缩略图，您可以通过标签对其进行排序，例如：

<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 循环再次运行还是什么？

4

2 回答 2

0

您必须通过 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/

于 2013-07-06T20:30:56.410 回答
0

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

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

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

使默认视图 div 可见 (style="display: block") 和其他隐藏 (style="dsplay: none")。

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

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

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

于 2013-07-06T20:21:27.837 回答