5

JQuery を使用して各列の最初の 5 回のみを表示し、「詳細」と「非表示」リンクを使用してより多くの結果を表示するにはどうすればよいですか。

私が求めているのは、すべてのli要素を非表示にして最初の2つを表示し、ボタンで切り替えるのと似ています-しかし、各医師のすべてのタイムスロットを表示/非表示するには、リンクを増やす/減らす必要があります(つまり、リンクを増やす/減らす)ワンクリックで各医師の 7 列のすべての時間を表示/非表示にする必要があります)。

--これが現在の様子です--

--これが私が探している結果です--

--私のHTMLコード--

<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr John Doe</div>
  </div>
  <div class="appointmentInfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">09:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>
<div class="appointmentDetails">
  <div class="staffInfo">
    <div>Dr Tom Smith</div>
  </div>
  <div class="appointmentInfo">
    <ul>
      <li>
        <div></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
        <div><a href="#">13:00</a></div>
        <div><a href="#">14:00</a></div>
        <div><a href="#">15:00</a></div>
        <div><a href="#">16:00</a></div>
        <div><a href="#">17:00</a></div>
        <div><a href="#">18:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">08:00</a></div>
        <div><a href="#">09:00</a></div>
        <div><a href="#">10:00</a></div>
        <div><a href="#">11:00</a></div>
        <div><a href="#">12:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots">
        <div><a href="#">10:00</a></div>
      </li>
      <li class="timeSlots bg">
        <div><a href="#">10:00</a></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </div>
</div>

-- これは私の HTML/JAVASCRIPT/CSS のライブ デモです --

http://jsfiddle.net/rR26n/

4

4 に答える 4

1

「解決策」にたどり着く前に: あなたのマークアップはあまりセマンティックではありません。時間のリストを表示しているため、時間は DIV ではなくリストにする必要があります。これらのリストは、左にフロートするか、インライン ブロックすることができ、マークアップの多くの無駄を取り除くことができます。

次のようなリストに自分の時間を持っていると仮定します。

<ul class="timeList">
   <li class="timeSlot">8:00</li>
   <li class="timeSlot">9:00</li>
   ...
   <li class="timeSlot">18:00</li>
</ul>

あなたはいくつかのことをしたいです：

  1. リストに 5 つ以上のスロットがある場合は、#5 以降をすべて非表示にして、MORE リンクを追加します。
  2. MORE リンクをクリックすると、#5 以降のすべてが表示され、LESS リンクに変更されます
  3. LESS リンクがクリックされた場合、#5 以降のすべてを非表示にして、MORE リンクに戻す

まだ jQuery を使用していない場合は、jQuery を使用することをお勧めします。jQuery を使用すると作業が大幅に簡単になるため、これらの作業を行う方法についての私の提案では、jQuery を使用します。

番号 1 の場合、次のように特定のインデックスの後に要素を非表示にすることができます。

       jQuery(".someClass").children(":gt(4)").hide();

これにより、5 番目以降の要素が非表示になります。ただし、これにより、他のすべてのリストの LI も非表示になります。これは、上記のコードがすべてのリストのすべての子を 1 つの大きなコレクションに配置し、5 番目の要素の後にそれらをすべて非表示にするためです。したがって、すべてのリストを繰り返し処理し、その子のみを非表示にする必要があります。

ここでその例を作成し、何が起こっているかを視覚的に確認できるように、非表示にする代わりに赤にしました。

jQuery(function () {
    jQuery(".timeList").each(function () {
        jQuery(this).children(":gt(4)").css('color','red');
    });
});

ここで実際の動作を確認できます: http://jsfiddle.net/7PeVj/

#2 については、各リストが 5 つを超えているかどうかを確認し、MORE リンクを追加する必要があります。すでに各リストを繰り返し処理しているため、そのコードをそこに実装できます。子の結果の長さを使用して、5 つを超えているかどうかを確認し、jQuery のappend()関数を使用してボタンを追加できます。

その例を次に示します。現在、以下の子のみを求めていることに注意してください。timeSlots 

    jQuery(".timeList").each(function () {
        // reference to the list
        var theList = jQuery(this);
        // reference to it's LIs that have .timeSlot
        var kids = theList.children(".timeSlot");
        // manipulate after element 5
        kids.filter(":gt(4)").css('color','red');
        //add a MORE link if we have more than 5
        if (kids.length > 5) {
            theList.append('<li class="slotMoreLess">MORE</li>');
        }
    });

作業例: http://jsfiddle.net/7PeVj/2/

最後に、アイテムを適切に非表示および表示するために、MORE / LESS を「接続」する必要があります。on()これらのボタンはページの読み込み時には存在しないため、jQuery を使用してこれらのボタンのハンドラーをアタッチする必要があります。

繰り返しますが、実例はhttp://jsfiddle.net/7PeVj/4/にあります。

上記のコードで見たものを使用して、非表示と表示を行うことができます。MORE リスト項目を調べて設定し、text()必要に応じて LESS と MORE の間で切り替えたり、表示を非表示にしたりできます。

于 2013-02-28T15:07:08.870 に答える
1

どうぞ： http://jsfiddle.net/eqmgy/

追加する必要があります

            <div class="less"><a href="#">Less</a>
            </div>
            <div class="more"><a href="#">More</a>
            </div>

それぞれの終わりに<li class="timeSlots"></li>

そしてjs：

var showMore = function () {
    $(this).find('div').css('display', 'block');

    $(this).find('.more').css('display', 'none');
    $(this).find('.less').css('display', 'block');
    $(this).find('.less').click($.proxy(showLess, $(this)));

};

var showLess = function () {
    $(this).find('div').each(function(index, div) {
        if(index > 5) {
            $(div).css('display', 'none');
        }
    });

    $(this).find('.less').css('display', 'none');
    $(this).find('.more').css('display', 'block');

    $(this).find('.more').click($.proxy(showMore, $(this)));

};

$('.timeSlots').each(function (index, timeslot) {
    $.proxy(showLess, timeslot)();
});

編集 ：

代わりに More/Less を自動的に追加してみましょう。

$('.timeSlots').each(function (index, timeslot) {
            if(timeslot.find('div').length > 5) {
                 timeslot.append('<div class="more"><a href="#">More</a></div>');
                 timeslot.append('<div class="less"><a href="#">Less</a></div>');
                 $.proxy(showLess, timeslot)();
            }
});
于 2013-02-28T14:30:04.343 に答える
0

これを試して：

http://jsfiddle.net/rR26n/8

// hide all times and then show the first 5
var hideTimes = function() {
    $('.timeSlots').each(function () {
        $(this).children('div').hide().filter(':lt(5)').show();
    });
}

// show all times
var showTimes = function() {
    $('.timeSlots > div').show();
}

$('.show').click(function () {
    showTimes();
});

$('.hide').click(function () {
    hideTimes();
});

hideTimes();

これがワンボタンの例です：http：//jsfiddle.net/rR26n/9/

どちらの例でも、ボタンが.appointmentDetailsのすべてのインスタンスに作用しないように、少し調整が必要です。IDまたはクラスインデックスを使用してこれを行うことができます。

于 2013-02-28T14:17:57.920 に答える
0

考えられる解決策の1つ：

$timeSlots = $('.timeSlots');
$timeSlots.each(function() {
    var $times = $(this).children();
    if ($times.length > 5) {
        $timeSlots.children(':nth-of-type(n+6)').hide();
        $(this).append('<span class="more-times">+More</span>');
    }
});

$timeSlots.on('click', '.more-times', function() {
    $(this).prevAll().show().end().remove();
});

このコードをで実行するだけDOMreadyです。

http://jsfiddle.net/dfsq/rR26n/6/

于 2013-02-28T14:12:13.667 に答える