Question

我有一个带漂亮照片库的网页。每个图片缩略图都有不同的彩色叠加层（当您将鼠标悬停在图片上方时）。我有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>

Answer 1

用作

$('.grafica-wrap').removeClass('grafica-wrap').addClass('your-class');

Answer 2

发表评论：

我有

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

完全未经测试。

Answer 3

我建议使用ID "all"，以确保在点击具有类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");
});

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

如果选择了li，则更改div类

3 个答案: