0

さて、私はいくつかのサムネイルを表示するこのポートフォリオ ページを持っています。タグで並べ替えることができます。たとえば、次のようになります。

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

そして、これはうまくいきます。ただし、私のサムネイルは 3 列に表示されるため、最初の 2 つだけに右マージンを設定し、3 つ目のサムネイルにはマージンを設定しません。私はこれを行うために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();
}

しかし、タグをクリックしても余白が更新されません。そのため、サムネールが 3 番目の行であるためにオーバービューで余白が与えられなかった場合、タグが選択されたために最初に表示された場合にも余白が与えられません。

もちろん、これは何も「更新」されないためですが、この問題を解決する「簡単な」方法があるかどうか疑問に思っていましたか? 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 に答える