比较类和执行操作/比较器2类和公平操作

如何解决比较类和执行操作/比较器2类和公平操作

我需要一些帮助。我有一个菜单，其中包含诸如过滤器之类的链接，用于隐藏和显示与它们相关的某些图库。 例如，链接过滤器“数字绘画”显示画廊“数字绘画”，因为画廊“传统绘画”保持隐藏状态。

在我的推理中，我给链接和画廊提供了相同的类，它们需要链接在一起，例如链接过滤器“数字绘画”和画廊“数字绘画”具有相同的类“数字绘画” “。
因此，如果类链接过滤器和图库的类重合，那么我将展示实际具有相同链接类的图库，并隐藏其他图库。

////// *下面的代码结果：当我单击第一个链接时，将显示所有画廊，如果我单击第二个链接，则将隐藏所有画廊。

你知道吗？

-法文：可以在菜单上找到不同的东西，然后倒入不同的画廊。宗教信使的信条（J’ai donc mis lamêmeclasse auxélémentsqui doiventêtrereliés）丹尼尔·蒙·雷森内门（Dans mon raisonnement），加拉画廊（gala si la classe de la galerie）对应着《大律师报》和《大律师报》（alors elle s'affiche sinon elle restecachée）。 Résultatdu code ci-dessous：优先菜单上的lorsque je clique sur affaffent，第二次使用si je que que les galeries se masquent：/

代码JS：

//--- I get my link filter element
var menuLink = $('.pageInt-header').find('.menuFiltre').find("li");

//--- I get my galery element
var pageIntGalerie = $('.pageInt-galerie').find('.galerie-mod');


$(menuLink).click(function(e) {

    e.preventDefault();

    //my link has few classes so I get the one who interessed me
    var classLink = $(this).attr('class').split(' ')[0];
    //my galery has few classes so I get the one who interessed me
    var classGalerie = $('.pageInt-galerie').find('.galerie-mod').attr('class').split(' ')[5];

    //if class link filter = class galery//
    if ( classLink == classGalerie ){
        $(pageIntGalerie).show();
    }else {
        $(pageIntGalerie).hide();
    }

});

代码HTML

菜单：

<nav>
     <..><li class="**charaDesign** class-2 class-3"><a></a></li>
         <li class="interface class-2 class-3"><a></a></li>
     </..>
</nav>

杂货店：

<div class="pageInt-galerie">
                  <div class="class-1 class-2 class-3 class-4 class-5 **charaDesign**"></div>
                  <div class="class-1 class-2 class-3 class-4 class-5 **interface**"></div>
             </div>

PS：对不起，我的英语...而且我在本地工作，所以我没有链接

谢谢您的帮助：）

劳拉

解决方法

首先，您永远都不会像您一样依赖类列表并从中静态提取它，因为如果添加新类，您的代码将无法再使用，我重构了html以使用data- * attrs并将其链接到画廊的ID。

false

对于js部分

<nav>
  <li data-id="gal1"><a href="#">test1</a></li>
  <li data-id="gal2"><a href="#">test2</a></li>
  <li data-id="gal3"><a href="#">test3</a></li>
</nav>

<hr/>

<div class="pageInt-galerie">
  <div id="gal1" class="galery">test1 description</div>
  <div id="gal2" class="galery">test2 description</div>
  <div id="gal3" class="galery">test3 description</div>
</div>

活笔：https://codepen.io/sersif-samer/pen/abNrQEQ

,

问题解决了！

var menuLink = $('.pageInt-header').find('.menuFiltre').find("li").children("a");
var pageIntGalerie = $('.pageInt-galerie').find('.galerie-mod');
    
        $(menuLink).click(function(e) {
    
            //on annule le comportement par défaut
            e.preventDefault();
    
            var classLink = $(this).parent().attr('class').split(' ')[0];
            $(pageIntGalerie).hide();
            $("#"+classLink).show();
    
        });