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

好的，我有一个公文包页面，其中显示了几个缩略图，您可以按标签排序，例如：

<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();
}

if（$result=$link->query（$query））{
对于（$i=1；$i num_行；$i++）{
$row=$result->fetch_assoc（）；
$id=$row['number']；
$title=$row['title']；
$bgthumbnail=$row['thumbnail']；
如果（$i%3==0）{
回声“
";
}否则{
回声“
";
}
}  
$result->close（）；
}

但是，单击标记时，边距不会更新。因此，当一个缩略图因为是第三行而在概览中没有边距时，当它因为选择的标记而显示第一行时，它也没有边距

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

除非您的“标记”正在调用页面，以便重新执行PHP，否则您可能需要查看javascript（或者可能是ajax）来重新格式化布局

根据缩略图的数量和标记的种类，您可以使用php为每个不同的过滤器标记创建一个div（具有相关id和style=”“属性），其中包含该标记的缩略图布局（因此您可以确保布局适合每个视图）

i、 e.重复上面的代码，每个视图都有一个唯一的div标记

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

然后有一个javascript函数，可以在任何标记单击时执行。这将通过如上所述更改样式值，使相关div可见，其余部分隐藏

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

---

尽管如此，我认为使用相对过滤器（取决于标记）调用页面更干净、更具可伸缩性，这样您就可以更好地控制布局。

您必须通过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;
});

---

试试这个JSFIDLE

我不熟悉Ajax，但是，如果这是最好的解决方案，我可以尝试开始研究它。你可以尝试在css中使用，以避免只为marginFWIW使用自定义类，你可以跳入或跳出php模式

，这将阻止你使用

echo

编写HTML。在这种情况下，php只是一开始的“生成循环”。我建议你使用javascript刷新页边距等。如果你想再次运行php，你可以刷新页面，但这不是你想要的。仅供参考，您还可以考虑一下Refector此代码为什么要重复两次html以添加

noMargin

类？使用

。。。。。。class=\“thumbnailOverview”。（$i%3==0）？“noMargin”：“”）。“\”styl………

而不是重复并节省空间和时间：\n可能是，有些决策没有javascript（仅css），但它取决于标记和样式，需要查看css代码。