比较类和做操作/比较器2类和

Question

我需要些帮助。我有一个菜单，其中有一些链接，像过滤器一样，用来隐藏和显示与它们相关的一些画廊。以链接过滤器“数字绘画”为例，说明了“传统绘画”隐藏后的“数字绘画”。

在我的推理中，我给链接和需要连接在一起的galery提供了相同的类，例如链接过滤器“数字绘画”和galery“数字绘画”有相同的类“数字绘画”。

所以如果类链接过滤器和galery的类重合，我会向galery展示这个链接中有相同类的人，然后我将其他的链接隐藏起来。

/*下面代码的结果:当我在第一个链接上循环时，所有的数组都会被显示，如果我在第二个链接上循环，那么所有的数组都会被隐藏。

你知道怎么做吗？

-法文:J‘un菜谱请我插上滤液，然后再加入加里丝·迪夫·伦特斯。J‘si donc mis la mème classe auxéléments qui doiventétre reliés. Dans mon raisonnement，si la classe de la galerieàla classe du lien cliquéalors elle s’‘affiche sinon elle reste cachée. Résultat du code ci-dessous : lorsque je clique le premier du ments toutes les Dans’‘affichent，si je clique sur le第二轮快餐店:/ /

代码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();
    }

});

代码

菜单：

<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>

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

谢谢你的帮助:)

劳拉

Answer 1

首先，不要像以前那样依赖类列表并静态地从其中提取类列表，因为如果您添加了一个新的类，您的代码就不再起作用了，我重构您的html以处理数据-* attrs，并将其链接到图库上的id。

<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>

对js来说

// on load hide all galleries.
  $('.galery').hide();

  $('nav li').on('click', function(){
    // hide all gals on click
    $('.galery').hide();
   //loop through all gals
   const els =  $('.galery');
   els.map(g => {
     const {id} = els[g];
     //extract only the one we want and show it
     id === $(this).data('id') ? $(`#${id}`).show() : true
   });
 })

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

Answer 2

问题解决了！

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