0

Web サイトの写真セクションで、show more と hide less の機能を備えたシステムを作成しようとしていますが、少し問題が発生しているようです。ここでフィドルを作成したので、私が話していることを正確に見ることができます。

基本的に、ロード時に 10 枚の画像を表示して (これは発生していません)、さらに 10 枚を表示して、そのうちの 10 枚を非表示にする別のボタンが必要です。

しかし、私のインクリメントで何かが起こっているようです。読み込み時にすべての画像が表示され、表示を減らすとすべて消えます。その後、10 個の画像を追加または削除できますが、たまたま画像の数が奇数になると、画像が壊れて、必要以上に表示または非表示になります。それは理にかなっていますか？

私のjsは次のようになります。どんな助けでも素晴らしいでしょう！

 size_li = $(".imgLinks li").size();
      x=10;
      $('.imgLinks li:lt('+x+')').show();
      $('.show_button').click(function () {
          x= (x+10 <= size_li) ? x+10 : size_li;
          $('.imgLinks li:lt('+x+')').show();
           $('.hide_button').show();
          if(x == size_li){
              $('.show_button').hide();
          }
      });
      $('.hide_button').click(function () {
          x=(x-10<0) ? 10 : x-10;
          $('.imgLinks li').not(':lt('+x+')').hide();
          $('.show_button').show();
           $('.hide_button').show();
          if(x == 10){
              $('.hide_button').hide();
          }
      });
4

3 に答える 3

2

最初にすべての画像と非表示ボタンを非表示にすると、js コードは最初の 10 個を表示し、すべて問題ないように見えます。css コードに以下を追加します。

.imgLinks li, .hide_button{
    display:none;
}

http://jsfiddle.net/SrK88/8/

または、これらの 2 行を js の先頭に追加します。

$(".imgLinks li").hide();
$(".hide_button").hide();

http://jsfiddle.net/SrK88/9

編集

偶数/不均一の問題については、非表示のコードを次のように変更します。

$('.hide_button').click(function () {
        x = (x - 10 < 0) ? 10 : (x%10!=0?x-(x%10):x - 10);
        $('.imgLinks li').not(':lt(' + x + ')').hide();
        $('.show_button').show();
        $('.hide_button').show();
        if (x == 10) {
            $('.hide_button').hide();
        }
    });

http://jsfiddle.net/SrK88/24/

于 2013-11-01T18:58:19.700 に答える
0

これはどうですか http://jsfiddle.net/SrK88/21/

UPDATE%は、演算子 を使用して不均一な金額を処理するようにコードを変更しました: http://jsfiddle.net/SrK88/23/

最初から画像を非表示にしないため、最初にすべての画像が表示されました。

あなたのサイズのビットで、私はそれをに変更しましたvar size_li = $(".imgLinks li").hide().size();

例から明らかでない場合は、喜んで説明します。

表示/非表示のどこにいたかを内部的に追跡するのは非常に複雑に思えたので、代わりに表示されている を見て、<li>さらに表示または非表示にできるかどうかを確認します

于 2013-11-01T19:09:18.953 に答える