クリックしたクラスの要素だけを表示し、jQueryで他の要素をすべて隠す方法

Question

初心者は見回すように最善を尽くしましたが、まったく同じものは見つかりませんでした。

私は、同じ4種類のリンク（それぞれが独自のクラスを持っている）の複数の出現を持つ状況があります。

例：

<a href="#" class="link1">Link 1</a> 
<a href="#" class="link2">Link 2</a> 
<a href="#" class="link3">Link 3</a> 
<a href="#" class="link4">Link 4</a> 
<a href="#" class="link1">Link 1</a> 
<a href="#" class="link2">Link 2</a> 
<a href="#" class="link3">Link 3</a> 
<a href="#" class="link4">Link 4</a> 

私が「リンク1」、2-4（ページオフ）消えクラスと任意のリンクをクリックしてくださいので、もしそれを取得しようとしていると唯一のクラス、「リンク1とリンクしています"が表示されます。

<a href="#" class="link1">Link 1</a> 
<a href="#" class="link1">Link 1</a>` 

私は（変数へのクリックしたリンクを割り当て作成し、.NOTを使用して試してみました）または.siblings（）、しかし、これまで動作するように何かを得ることはできません。

var clickedLink = $(this).closest('a').attr('class'); 
$(clickedLink).siblings().hide(); 

は、（.hideするリンクのすべてを（そのようなクラス=「テスト、リンク1」など）の共有クラスを付与しようとした）、次いで.SHOW（）、それは唯一の（非表示になる）としないだろうshow（）。

ありがとうございました。

Answer 1

（あなたが好き場合は、 "テスト"）は、第2の "hidecontrol" という名前のクラスを作成し、nomeoneをクリックしますと、evething隠す：

$(".hidecontrol").css("display","none");

そして、あなたの要素を示しています。

<what_you_clicked>.css("display","block");

Answer 2

以下、簡略化され、例えば、途中であなたを助ける必要があります。

https://jsfiddle.net/jhqbf4nb/

$('.wrap a').click(function() { 
    var $target = $(this); 

    $target.siblings().not('.' + $target.attr('class')).hide(); 
}) 

注私は選択が少し容易にするためのリンクの周りのラッパー.wrapを追加しました。

---

実際、上記の解決策は、私の好みにはあまりにも単純です。あなたのケースではうまくいくはずですが、DOM構造について多くの前提があります。実際の生活の中で私はおそらく、この順番で何かのために行くだろう：

https://jsfiddle.net/jhqbf4nb/1/

var $links = $('.link'); 

$links.click(function() { 
    var $target = $(this); 
    var type = $target.data('type'); 

    $links.not('[data-type="' + type + '"]').hide(); 
}) 

私はdata-type属性への「タイプ」を移動しました。この方法で、あなたはそれらのリンクで好きなだけ多くのクラスを持つことができます。また、彼らはもはや兄弟である必要はありません、彼らはあなたのDOMのどこにでもあることができます。これははるかに柔軟でなければならず、DOMが将来変更されたときにはずっと良くなっているはずです（また、初めて読むときにわかりやすく、自己説明コードの大きなファンです）。

Answer 3

ここで私の解決策ですが、これはおそらくより良いjQueryセレクタで簡略化できます。

https://jsfiddle.net/tkcohpqv/1/

$('a').click(function() { 
    var clicked = $(this); 

    //hide other links 
    $('a').each(function() { 
     if (!$(this).hasClass(clicked.attr('class'))) { 
      $(this).hide(); 
     } 
    }); 
}); 

Answer 4

私はあなたがこれを使ってやりたいことができると思います。

$('a').click(function(){ 
 
    var className = '.' + $(this).attr('class'); 
 
    var $siblings = $(this).siblings(':not('.' + $(this).attr('class') + ')'); 
 
    $siblings.hide(); 
 
};

Answer 5

はトグル（）関数を使用します：

$('a').click(function() { 
    var check = $(this).attr('class'); 
    $('a').each(function() { 
     $(this).toggle($(this).attr('class') == check); 
    }); 
}); 

は、すべてのリンクとあなたがそうのように、このリンクをクリックして、表示したいリンク何を定義するデータ属性をカバーする追加のクラスを追加、jsbin

Answer 6

最初に参照してください。これを使用し、その後

<a href="#" class="link link1" data-show-only="link1">Link 1</a> 
<a href="#" class="link link2" data-show-only="link2">Link 2</a> 
<a href="#" class="link link3" data-show-only="link3">Link 3</a> 
<a href="#" class="link link4" data-show-only="link4">Link 4</a> 
<a href="#" class="link link1" data-show-only="link1">Link 1</a> 
<a href="#" class="link link2" data-show-only="link2">Link 2</a> 
<a href="#" class="link link3" data-show-only="link3">Link 3</a> 
<a href="#" class="link link4" data-show-only="link4">Link 4</a> 

をJSクリックします。

あなたのための例の作業

$('.link').on('click', function() { 
    $('.link').hide(); 
    var linksToShow = $(this).data('show-only'); 
    $('.' + linksToShow).show(); 
}); 

:) https://jsfiddle.net/oebgbue9/1/