1

私はjQueryUISliderを使用しており、スライダーの各位置で数値（ui.value）を吐き出すので、スライダーの位置である数値に従ってdivを表示し、残りはすべて非表示にします。

例：スライダーが4番にある場合は、div＃pos4を表示します

これは私が思いついたものであり、それは機能します。私の質問は、コードをより小さく/より良くするために何ができるかということです。

JS

slide: function( event, ui ) {
   var pos = ui.value,
       off = $(".off");

   if (pos == 1) {
     $(off).hide();
     $("#pos1").show();
   };

   if (pos == 2) {
     $(off).hide();
     $("#pos2").show();
   };

   if (pos == 3) {
     $(off).hide();
     $("#pos3").show();
   };

   if (pos == 4) {
     $(off).hide();
     $("#pos4").show();
   };

   if (pos == 5) {
     $(off).hide();
     $("#pos5").show();
   };

   if (pos == 6) {
     $(off).hide();
     $("#pos6").show();
   };

HTML

<div id="pos1" class="off" style="display: block;"><br />STAR</div>
<div id="pos2" class="off"><br />Tech Expo</div>
<div id="pos3" class="off"><br />VisFest</div>
<div id="pos4" class="off"><br />ITL</div>
<div id="pos5" class="off"><br />Conferences &amp; Events</div>
<div id="pos6" class="off"><br />Instructional Support</div>

CSS

.off {
display:none;
}
4

3 に答える 3

2

少なくともあなたはできる：

slide: function( event, ui ) {

     $(".off").hide();
     $("#pos"+ui.value).show();

});
于 2012-10-24T00:03:38.663 に答える
2

あなたが書いた反復的なコードはたくさんあります。pos変数を使用して、対応するdivを表示できます。

slide: function( event, ui )
{
   var pos = ui.value;

   $(".off").hide() ; // Hide all
   $('#pos' + pos).show();  // Show corresponding div
}
于 2012-10-24T00:04:09.290 に答える
1

または、次のような方法を試してみてください。

    <div id="allpos">
        <div class="off"><br />STAR</div>
        <div class="off"><br />Tech Expo</div>
        <div class="off"><br />VisFest</div>
        <div class="off"><br />ITL</div>
        <div class="off"><br />Conferences &amp; Events</div>
        <div class="off"><br />Instructional Support</div>
    </div>

    slide: function( event, ui ) {
        var index = ui.value;
        $('.off').hide();
        $('#allpos').children(':nth-child('+ index +')').show(); //nth-child's index starts at 1
    };

他のものとは少し異なりますが、これの良い点の1つはid、各divの属性を作成する必要がないことです。

nth-childセレクターの詳細：http： //api.jquery.com/nth-child-selector/

于 2012-10-24T09:40:46.887 に答える