18

表示されているスパン要素がある場合は非表示にし、要素がクリックされた場合は再度切り替えたい

<div class="item">
    <a href="">element1</a> <span>span1</span>
    <br>
</div>

<div class="item">
    <a href="">element2</a> <span>span2</span>
    <br>
</div>

<div class="item">
    <a href="">element3</a> <span>span3</span>
    <br>
</div>

<div class="item">
    <a href="">element4</a> <span>span4</span>
    <br>
</div>

JS

$('.item span').hide();

var all_spans = $('.item a').parent().find('span');

$('.item a').click(function(e) {

    e.preventDefault();
    // hide all span
    all_spans.hide();
    $this = $(this).parent().find('span');
    // here is what I want to do
    if ($this.is(':hidden')) {
        $(this).parent().find('span').show();
    } else {
        $(this).parent().find('span').hide();
    }

});

実際の例http://jsfiddle.net/BGSyS/

問題は、たとえば ' element 1' span1' がまだ表示されていて、これを切り替えたい

4

4 に答える 4

31 
 $('.item span').hide();

$('.item a').click(function(e){

    e.preventDefault();
    // hide all span
    var $this = $(this).parent().find('span');
    $(".item span").not($this).hide();

    // here is what I want to do
    $this.toggle();

});

デモをチェック

説明付きで更新：

問題は、すべてのスパンを非表示にすると、現在のスパンも非表示になる => すべてのスパンが同じ状態 (非表示) になり、次の行に再び表示されることです。非表示にするときに現在の要素を除外し、toggle メソッドを使用してその状態を切り替える必要があります (if を使用してチェックするよりも簡単です)。

別の問題は、を使用varして宣言することにより、暗黙的なグローバルを回避しようとすること$thisです。

var $this = $(this).parent().find('span');
于 2013-07-14T08:41:59.390 に答える
5

それよりもはるかに簡単にすることができます:更新されたフィドル

var all_spans = $('.item span').hide();

$('.item a').click(function(e){
    var thisSpan = $(this).parent().find('span'),
        isShowing = thisSpan.is(":visible");

    // Hide all spans
    all_spans.hide();

    // If our span *wasn't* showing, show it
    if (!isShowing) {
        thisSpan.show();
    }

    e.preventDefault();
});

コードの主な問題は、要素が表示されているかどうかをa確認するのではなく、要素が表示されているかどうかを確認していたことですspan。

あなたのコードは、次の行で The Horror of Implicit Globals の餌食にもなりました。

$this = $(this).parent().find('span');

$this...どこにも宣言していないため、グローバル変数が作成されます。

于 2013-07-14T08:42:19.233 に答える
0

スパン セレクターを使用してすべてのスパンを非表示にし、次に $(this) キーワードを使用して、クリックされたリンクの横にあるスパンを見つけます。

$(".item a").click(function() {
  // Hide all item spans
  $(".item span").hide();
  // Show the element next to this
  $(this).next().show();
});
于 2013-07-14T08:41:03.373 に答える