3

我有使用无序列表的简单画廊。

    <h1>Projects</h1>
    <hr>

    <!-- Projects gallery as unordered list -->

    <ul class="gallery">

      <li class="item residential">
        <img src="Projects/01-HighTorEast-EarlShilton/01-thumbnail.jpg" width="212" height="119" alt="High Tor East, Earl Shilton">
        <h2><a class="info" href="Projects/01-HighTorEast-EarlShilton/info.php">High Tor East, Earl Shilton</a></h2>
        <h3><a class="cat" href="residential">Residential</a></h3>
      </li>

      <li class="item modernisation">
        <img src="Projects/02-Hollycroft-Hinckley/02-thumbnail.jpg" width="212" height="119" alt="Hollycroft, Hinckley">
        <h2><a class="info" href="Projects/02-Hollycroft-Hinckley/info.php">Hollycroft, Hinckley</a></h2>
        <h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3>
      </li>

      <li class="item residential">
        <img src="Projects/03-SpaLane-Hinckley/03-thumbnail.jpg" width="212" height="119" alt="Spa Lane, Hinckley">
        <h2><a class="info" href="Projects/03-SpaLane-Hinckley/info.php">Spa Lane, Hinckley</a></h2>
        <h3><a class="cat" href="residential">Residential</a></h3>
      </li>

      <li class="item residential">
        <img src="Projects/04-Farnhambridge-Rothley/04-thumbnail.jpg" width="212" height="119" alt="Farnhambridge Farm, Rothley">
        <h2><a class="info" href="Projects/04-Farnhambridge-Rothley/info.php">Farnhambridge Farm, Rothley</a></h2>
        <h3><a class="cat" href="residential">Residential</a></h3>
      </li>

      <li class="item modernisation">
        <img src="Projects/05-NetherfieldClose-BroughtanAstley/05-thumbnail.jpg" width="212" height="119" alt="Netherfield Close, Broughtan Astley">
        <h2><a class="info" href="Projects/05-NetherfieldClose-BroughtanAstley/info.php">Netherfield Close, Broughtan Astley</a></h2>
        <h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3>
      </li>

      <li class="item modernisation">
        <img src="Projects/06-Bridlepath-Elmesthorpe/06-thumbnail.jpg" width="212" height="119" alt="Bridlepath, Elmesthorpe">
        <h2><a class="info" href="Projects/06-Bridlepath-Elmesthorpe/info.php">Bridlepath, Elmesthorpe</a></h2>
        <h3><a class="cat" href="modernisation">Modernisation & Domestic Extensions</a></h3>
      </li>

      <li class="item residential">
        <img src="Projects/07-Bridlepath-Elmesthorpe/07-thumbnail.jpg" width="212" height="119" alt="Bridlepath, Elmesthorpe">
        <h2><a class="info" href="Projects/07-Bridlepath-Elmesthorpe/info.php">Bridlepath, Elmesthorpe</a></h2>
        <h3><a class="cat" href="residential">Residential</a></h3>
      </li>

      <li class="item feasibility">
        <img src="Projects/08-GrangeCroft-Ullesthorpe/08-thumbnail.jpg" width="212" height="119" alt="Grange Croft, Ullesthorpe">
        <h2><a class="info" href="Projects/08-GrangeCroft-Ullesthorpe/info.php">Grange Croft, Ullesthorpe</a></h2>
        <h3><a class="cat" href="feasibility">Feasibility layouts</a></h3>
      </li>

      <li class="item master">
        <img src="Projects/09-RailwayInn-Sileby/09-thumbnail.jpg" width="212" height="119" alt="The Railway Inn, Sileby">
        <h2><a class="info" href="Projects/09-RailwayInn-Sileby/info.php">The Railway Inn, Sileby</a></h2>
        <h3><a class="cat" href="master">Master planning</a></h3>
      </li>


    </ul>

  </section>

比在我的 css 中，我将 .item 类的每四个孩子的右边距值设置为零。我这样做是为了在我的页面上将四个项目保持在一行中，并且在不删除边距的情况下我只能容纳三个。

ul.gallery { clear:both; list-style:none; margin:0; padding:0; width:940px; }
.gallery a:hover { text-decoration:underline; }
li.item { display:inline; margin:30px 20px 30px 0px; padding:0px; height:178px; width:220px; float:left; background:#ededed url('../Images/featuredline.png') repeat-x 0% 100%; overflow:hidden; }
li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; }

接下来，我编写了小的 jQuery 代码来按类别对项目进行排序。因此，如果有人点击“住宅”链接，它将隐藏具有不同类别的元素。

    $('.cat').bind('click', function(e) {
    var cat = $(this).attr('href');
    $('.item').each(function () {
    var itemClass = $(this).attr('class');
    if (itemClass != 'item '+cat) {
        $(this).css({"display":"none"});
    };


    });
    e.preventDefault();

我的问题是：当我使用上面的 jQuery 脚本对画廊项目进行排序时，似乎 .item:nth-child 属性仍在计算显示属性设置为无的元素。我不知道怎么咬它。我需要 css .item:nth-child 属性来计算 jQuery 插件触发后的可见元素。

网站可在此处获得http://www.damianwojtczak.com/avd2/projects.php

4

4 回答 4

1

移除你的 nth-child CSS 样式，每次你改变布局时，调用这个：

$("li.item:visible").each(function(i) {
    if((i+1)%4==0) $(this).css("margin","30px 0");
    else $(this).css("margin","30px 20px 30px 0");
})

刚刚在你的网站上用萤火虫测试了它，并得到了款待。

于 2013-02-02T16:57:42.493 回答
1

一种解决方案是将nth-childcss 选择器更改为类并使用 jQuery 切换类。

li.item.marginClass { margin:30px 0px 30px 0px; }

JS：

$(function(){
    var $items=$('li.item');
    function toggleMargin(}{
        $items.removeClass('marginClass').filter(':visible').addClass(function(index){
              return index % 4 ===0 && index !=0 ? 'marginClass' : '';
        });
    }
    /* call for page loaded items*/
    toggleMargin(};

    $('.cat').bind('click', function (e) {
        /* filtering code here*/

        /* adjust class*/
         toggleMargin(};

    })



});
于 2013-02-02T17:01:30.923 回答
1

当你隐藏你的节点时，设置一些“isHidden”属性标志$(this).attr('isHidden')，当你显示你的节点时，删除这个标志.removeAttr('isHidden')，然后你可以更新你的选择器

li.item:not([isHidden]):nth-child(4n+4) { margin:30px 0px 30px 0px; }

如果您不想使用额外的属性，可以将其添加为类名，如Tomalak 的回答中所示。

于 2013-02-02T17:03:21.713 回答
0

CSS

代替

li.item:nth-child(4n+4) { margin:30px 0px 30px 0px; }

采用

li.item.split { margin:30px 0px 30px 0px; }

jQuery

reorderColumns  =   function(ev) {
    $('li.item').removeClass('split');
    $('li.item:visible:nth-child(4n+4)').addClass('split');
    ev.preventDefault();
};

$('.cat').on('click',reorderColumns);
于 2013-02-02T17:08:18.040 回答