2017-01-16 9 views
3

私はJavascriptとjQueryを学んでいますが、私はこの1つの問題に悩まされています。私のコードが次のようになっているとしましょう:1つのアイテムがクリックされている場合は、他のアイテムを削除しますか?

<div id="hey"> hey </div> 
<div id="how"> how </div> 
<div id="are"> are </div> 
<div id="you"> you </div> 

ここで、divのいずれかをクリックすると、他のものが消えてしまいます。 私はon.click heydisplay nonehowareyouでそれぞれの4つの関数を作成することができました。しかし、より簡単な方法はありますか?私はあるかもしれないが、classesとおそらく?

ありがとうございます!

答えて

6

siblingsを使用して、その "兄弟"を参照してください。

DOM要素の集合を表し、jQueryオブジェクトを考えると、.siblings()メソッドは、私たちは、DOMツリー内のこれらの要素の兄弟を検索し、一致した要素から新しいjQueryオブジェクトを構築することができます。

$('div').click(function(){ 
 
    $(this).siblings().hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

それともnot

を使用してクリックした要素がマッチした要素の集合から要素を削除しないでいるdiv他のすべてを非表示にすることができます。

$('div').click(function() { 
 
    $('div').not(this).hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

+0

ありがとうございます!私は数分で受け入れる – Syno

+2

:)私はあなたにこれを行う別の方法を提案した。見てみましょう。 –

2

あなただけクリックされたdiv要素のsiblings()を非表示にすることができます。

$('div').click(function() { 
 
    $(this).siblings().fadeOut() 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey">hey</div> 
 
<div id="how">how</div> 
 
<div id="are">are</div> 
 
<div id="you">you</div>

+0

ありがとう! Mosh Feuはもっと多くの提案をしました:) – Syno

1

あなたは要素を避けるためにnotを使用することができますし、thisは、現在のインスタンスを示します。

$(document).ready(function(){ 
 
    $("div").on("click",function(){ 
 
    $("div").not(this).hide("slow"); 
 
    }) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

+0

ここにダウンボートの理由は何ですか? @downvoter –

+0

downvoterコメントを追加してください理由は私の答えと一致PO – Bharat

0

要素のそれぞれにクラスを割り当てる:

<div id="hey" class='sth'> hey </div> 
<div id="how" class='sth'> how </div> 
<div id="are" class='sth'> are </div> 
<div id="you"class='sth' > you </div> 

とonclickのJS関数を書きます。この機能では「この」要素から

  1. 削除クラスのSTH "クラス「かなった」$('.sth').hide();
1

うん、いくつかの簡単な方法があると私は言うことができると

  • 隠すすべての要素それから1、あなたがつもりターゲットであるすべての要素に共通のクラスを設定し

    <div class="clickable" id="hey"> hey </div> 
    <div class="clickable" id="how"> how </div> 
    <div class="clickable" id="are"> are </div> 
    <div class="clickable" id="you"> you </div> 
    

    そして、あなたは

    $(".clickable").on("click", function(){ }); 
    

    今すぐ

    $(".clickable").on("click", function(){ 
        $(this).siblings(".clickable").hide(); 
    }); 
    

    しかし、トグルを使用しての代わりに、必要な要素を非表示にする.siblings()機能を使用し、クラスセレクタを使用して、単一のクリックイベントをバインドする必要がありますhideは論理的に聞こえるでしょう。

    $(".clickable").on("click", function(){ 
        $(this).siblings(".clickable").toggle(); 
    }); 
    

    すべての要素。

  • +0

    あなたは単純に '$( '.clickable')を行うことはできません(this).hide()'クリックコールバック内 –

    +0

    @PanamaProphet '.siblings()'を使うときは? –

    0

    この例では、実際にはこのソリューションを使用するとページのすべてのdivが影響を受けるようになりますが、divを追加する必要はありません。クラスを追加すると実際の提案になります。この例では動作します。 divをクリックすると、すべてのdivが非表示になり、クリックされたdivが表示されます。また、リセットボタンを追加して、すべてのdivが再表示されるようにしました。

    $('div').click(function(){ 
     
        $('div').hide(); 
     
        $(this).show(); 
     
    }); 
     
    
     
        $('#reset').click(function(){ 
     
        $('div').show(); 
     
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     
    <div id="hey"> hey </div> 
     
    <div id="how"> how </div> 
     
    <div id="are"> are </div> 
     
    <div id="you"> you </div> 
     
    <hr/> 
     
    <button type="button" id="reset">Reset</button>

    0

    $(document).ready(function(){ 
     
        $("div").on("click",function(){ 
     
        $("div").not(this).toggle("slow"); 
     
        }) 
     
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     
    <div id="hey"> hey </div> 
     
    <div id="how"> how </div> 
     
    <div id="are"> are </div> 
     
    <div id="you"> you </div>

    関連する問題