比较类并执行操作

Question

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

在我的推理中，我给 link 和 galery 相同的 classes，他们需要一起 linked，例如 link过滤器“数字绘画”和画廊“数字绘画”具有相同的class“数字绘画”。
因此，如果 class link 过滤器和 class 的画廊硬币 cide，我显示具有相同 class 的 [=53] 的画廊=]居然点了，其他的我都隐藏了。

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

你知道怎么做吗？

-- 法语：J'ai un menu qui me sert de filtre, pour afficher et cacher des galeries différentes。 J'ai 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。结果代码 ci-dessous : lorsque je clique sur le premier lien du menu toutes les galeries s'affichent, si je clique sur le second toutes 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 : 对不起我的英语...我在当地工作，所以我没有 link

感谢您的帮助:)

劳拉

Answer 1

首先，你永远不要依赖 class 列表并像你一样从中静态提取，因为如果你添加一个新的 class 你的代码将不再工作，我重构你 html 以使用 data-* attrs 和 link 它到画廊的 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();
    
        });

比较类并执行操作

Comparing classes and do action / Comparer 2 classes et faire une action

jquery

compare

menu

filter

比较 类 并执行操作

Comparing classes and do action / Comparer 2 classes et faire une action

jquery

compare

menu

filter

比较类并执行操作