5

問題があります。MySQLデータベースからデータを取得し、そのリストを作成しています。それはすべて良いことであり、正常に機能しますが、制限しない限り、リストの長さは100を超えています。リストを短くする方法をグーグルで試し、jQueryとJavaScriptでいくつかのことを見つけましたが、それはあまりうまくいきませんでした。

私が探しているのは、リストの下に[詳細]ボタンを使用して、リスト自体を10アイテムに制限する方法です。押すと次の10個のアイテムが表示され、もう一度押すとさらに10個のアイテムが表示されます。

私は通常<li>と<ul>ビットで私のリストを持っています。他に必要な情報があれば、私に聞いてください。これはそれについてのウェブページです：http：//lolmewn.nl/stats/

私のPHPコードの一部：

echo "<li><a href=\"?player=" . $row['player'] . "\">" . $row['player'] . 
     "</a></li>\n";
4

6 に答える 6

30

多分あなたはこれを試すことができます。この例では、10ではなく2つのアイテムを使用しました。cssを使用して、ul内の3番目のli要素から始まるすべてのli要素を非表示にしました。jQueryを使用して、[さらに表示]がクリックされるたびに追加の2つのliを表示しました。

お役に立てれば

リンクを再度更新しました...

編集

$(function () {
    $('span').click(function () {
        $('#datalist li:hidden').slice(0, 2).show();
        if ($('#datalist li').length == $('#datalist li:visible').length) {
            $('span ').hide();
        }
    });
});
ul li:nth-child(n+3) {
    display:none;
}
ul li {
    border: 1px solid #aaa;
}
span {
    cursor: pointer;
    color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="datalist">
  <li>dataset1</li>
  <li>dataset1</li>
  <li>dataset2</li>
  <li>dataset2</li>
  <li>dataset3</li>
  <li>dataset3</li>
  <li>dataset4</li>
  <li>dataset4</li>
  <li>dataset5</li>
  <li>dataset5</li>
</ul>
<span>readmore</span>

于 2012-06-08T07:51:24.267 に答える
2

1 つの方法は、ajax を使用してリスト項目をロードし、mysql limitを使用して項目を 10 個に制限することです。

それ以外の場合、一度にすべてをロードする場合は、次のことができます: (コードは自分で記述してください)

  • それらをすべて a にロードしul、表示をすべて none にします。

  • 次にjquery eq selector、最初の 10 個liの要素を表示します。

  • さらにクリックするとli、表示したいものを切り替えるだけです。

于 2012-06-08T07:14:15.997 に答える
1

jquery datatableを試したことはありますか?

于 2012-06-08T07:08:27.617 に答える
1

これが純粋なJavaScriptである場合は、jsfiddleで例を作成しました

Javascript

function showMore() {

    var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)')).slice(0, 3);

  for (var i=0; i < listData.length; i++)
  {
    listData[i].className  = 'shown';
  }
  switchButtons();
}

function showLess() {
    var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)')).slice(-3);
  for (var i=0; i < listData.length; i++)
  {
    listData[i].className  = 'hidden';
  }
  switchButtons();
}

function switchButtons() {
    var hiddenElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)'));
  if(hiddenElements.length == 0)
  {
    document.getElementById('moreButton').style.display = 'none';
  }
  else
  {
    document.getElementById('moreButton').style.display = 'block';
  }

  var shownElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)'));
  if(shownElements.length == 0)
  {
    document.getElementById('lessButton').style.display = 'none';
  }
  else
  {
    document.getElementById('lessButton').style.display = 'block';
  }
}

onload= function(){
    showMore();
}

HTML

<ul id="dataList">
    <li class="hidden">One</li>
    <li class="hidden">Two</li>
    <li class="hidden">Three</li>
    <li class="hidden">Four</li>
    <li class="hidden">Five</li>
    <li class="hidden">Six</li>
    <li class="hidden">Seven</li>
    <li class="hidden">Eight</li>
    <li class="hidden">Nine</li>
    <li class="hidden">Ten</li>
    <li class="hidden">Eleven</li>
</ul>
<input id="moreButton" type="button" value="More" onclick="showMore()"/>
<input id="lessButton" type="button" value="Less" onclick="showLess()"/>

CSS

.shown{
  display:block;
}
.hidden{
  display:none;
}
于 2016-05-25T15:48:18.060 に答える
1

純粋な JavaScript での簡単なソリューション:

var ul = document.getElementsByTagName("ul")[0], //Your <ul>
    readmore = document.createElement("li"),
    lisColl = ul.getElementsByTagName("li"),
    len = lisColl.length,
    lis = [],
    pos = 0;
readmore.textContent = "Read more";
for (var i = 0; i < len; i++) {
    lisColl[i].style.display = "none";
    lis.push(lisColl[i]);
}
readmore.onclick = function () {
    if (this.parentNode) {
        this.parentNode.removeChild(this);
    }
    for (var c = 0; pos < len; pos++) {
        if ((c++) === 10) {
            ul.insertBefore(this, lis[pos + 1]);
            break;
        }
        lis[pos].style.display = "";
    }
}
readmore.onclick.call(readmore);
于 2012-06-08T07:14:33.627 に答える
0

LIMIT 10データベースからの結果の数を制限する場合は、MySQL クエリに (または任意の数を)追加します。

実際にはリストを非表示にしたいが、それらを利用可能にしたい場合は、最初にそれらを非表示にする CSS と、それらを再表示する Javascript/Jquery が必要になります。(CSS3 では、Javascript/Jquery を使用せずにそれらを再表示できる場合がありますが、まだすべての場所で完全にサポートされているわけではありません)。

すべてのリスト項目に同じ CSS があると仮定するとclass、次のような JavaScript ループが機能する可能性があります。

function unhide(number) {
    var items = document.getElementsByClassName('tagnamehere');
    var shown=0;
    for (var i=0; shown<number && i<items.length; i++) {
        if (items[i].style.display=="" || items[i].style.display=="none") {
            items[i].style.display="list-item";
    shown+=1;
        }
    }
}

CSS に追加する必要があるのは、.tagnamehere {display:none;}

独自のタグで自由に置き換えてください。

于 2012-06-08T07:12:37.010 に答える