jqueryとjscript else if

Question

私は以下のコードを使用して、特定のテキストがクリックされたときにボックスを表示させます。どのように私はそれを制限するので、一度に1つのボックスだけをスライドさせることができます。

など。最初のボタンをクリックするとスライドし、2番目のボタンをクリックすると最初のボックスが再びスライドします。ここで

は私のコードは

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".flip1").click(function(){ 
    $(".panel1").slideDown("fast"); 
    }); 
}); 
$(document).ready(function(){ 
    $(".flip2").click(function(){ 
    $(".panel2").slideDown("fast"); 
    }); 
}); 
$(document).ready(function(){ 
    $(".flip3").click(function(){ 
    $(".panel3").slideDown("fast"); 
    }); 
}); 
$(document).ready(function(){ 
    $(".flip4").click(function(){ 
    $(".panel4").slideDown("fast"); 
    }); 
}); 
</script> 



<div id="betslip"> 
       <td><div class="panel1"><?php echo $bet1; ?></div></td> 
       <td><div class="panel2"><?php echo $bet2; ?></div></td> 
       <td><div class="panel3"><?php echo $bet3; ?></div></td> 
       <td><div class="panel4"><?php echo $bet4; ?></div></td> 
      </div> 

Answer 1

：

$(document).ready(function(){ 
    $("[class=^'flip'").click(function(){ 
    // get panel class 
    var panelClass = this.className.replace('flip', 'panel'); 
    // hide all open 
    $("[class^='panel']").hide(); 
    // show current one now 
    $('.' + panelClass).slideDown('fast'); 
    }); 
}); 

あなたが必要とするすべてです。

Answer 2

ださて、あなたはおそらく.slideUp()他のパネルのそれぞれにいくつかのコードに追加することによって開始することができます。まだ試しましたか？あなたはこのようなあなたのコードをリファクタリングし、最小限に抑えることができ

Answer 3

すべての一般的なクラス名に反転付け：これはあなたが持っている機能を滑り降り、その後、すべてのパネルをSlideUpます

$('.flip').click(function(){ 
    $('.panel').slideUp('fast'): 
}); 

：flipを

$(document).ready(function(){ 
    $(".flip1").click(function(){ 
    $(".panel1").slideDown("fast"); 
    }); 
}); 
$(document).ready(function(){ 
    $(".flip2").click(function(){ 
    $(".panel2").slideDown("fast"); 
    }); 
}); 
$(document).ready(function(){ 
    $(".flip3").click(function(){ 
    $(".panel3").slideDown("fast"); 
    }); 
}); 
$(document).ready(function(){ 
    $(".flip4").click(function(){ 
    $(".panel4").slideDown("fast"); 
    }); 
}); 

Answer 4

$(document).ready(function(){ 
    $(".flip1").click(function(){ 
     $("div[class^=panel]").slideup(); 
     $(".panel1").slideDown("fast"); 
    }); 

    $(".flip2").click(function(){ 
     $("div[class^=panel]").slideup(); 
     $(".panel1").slideDown("fast"); 
    }); 

    // Do the rest 
}); 

1つだけを使用するdocument.ready()

Answer 5

$(document).ready(function(){ 
    $('[class^="flip"]').click(function(){ 
     var thisId = $(this).attr('class').replace('flip'); 
     $('[class^="panel"]').slideUp("fast"); 
     $('.panel'+thisId).slideDown("fast"); 
    }); 
}); 

あなたは.panelと.flip要素