0

我有一个带有漂亮照片库的网页。每个图像缩略图都有不同颜色的叠加层（当您将鼠标悬停在图像上时）。我有 4 个类别，每个类别都有不同的缩略图覆盖颜色，这很好。

但我还有第 5 个类别，其中显示了画廊中的所有图像，在这里我想要所有图像的缩略图叠加的另一种颜色。

这是用于选择类别的 html：

<div class="gallerySelector">
        <ul class="gallerySelectorList">
            <li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
            <li><a data-filter="article.portfolio[data-category~='grafica']" href="#">Grafica</a></li>
            <li><a data-filter="article.portfolio[data-category~='gravura']" href="#">Gravura</a></li>
            <li><a data-filter="article.portfolio[data-category~='pictura']" href="#">Pictura</a></li>
            <li><a data-filter="article.portfolio[data-category~='desen']" href="#">Desen</a></li>
        </ul>
    </div>

这就是我在图像中调用的方式：

  <section class="portfolio_container">

        <article class="portfolio" data-category="grafica">
            <section class="thumbImage">
                <img src="images/gallery/afirmarea-thumb.jpg" alt="" class="fullwidth">
                <div class="grafica-wrap">
                    <div class="thumbText">
                        <h3 class="sectionTitle">Afirmarea</h3>
                        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p>
                        <a class="thumbLink" href="images/gallery/afirmarea.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."></a>
                    </div>
                </div>
            </section>
        </article>

是否可以使用 jquery 更改<div class="grafica-wrap">（这会添加缩略图叠加层，并且当它处于活动状态时，每个菜单项 [类别] 都有一个不同的菜单项：

<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
4

3 回答 3

0

像这样使用

$('.grafica-wrap').removeClass('grafica-wrap').addClass('your-class');
于 2013-08-04T09:00:33.737 回答
0

根据您的评论：

我有 

'grafica-wrap','desen-wrap','pictura-wrap','gravura-wrap'

并且我只想在以下情况下更改为另一个班级：

<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>

试试这种方式：

$('.grafica-wrap, .desen-wrap, .pictura-wrap, .gravura-wrap').filter('.current').each(function() {

     if($(this).find("a").data("filter") == "article.portfolio") $(this).removeClass().addClass('your-class');
});

完全未经测试。

于 2013-08-04T09:27:11.320 回答
0

我建议使用 id "all"，以确保在单击另一个带有 class 的元素时不会发生这种情况current。

<li class="current" id="all"><a data-filter="article.portfolio" href="#">All</a></li>

现在，如果您的意思是通过选择单击，

检测是否all被点击，并将class所有具有类 gravura-wrap 或 grafica-wrap 或 pictura-wrap 或 desen-wrap 的元素更改为其他类。

$("#all").click(function(){
    $(".gravura-wrap, .grafica-wrap, .pictura-wrap, .desen-wrap").removeClass().addClass("other-class");
});

希望这会有所帮助，如果它不让我知道我是否弄错了。

于 2013-08-04T09:55:01.387 回答