1

50 を超える要素を表示する aj クエリ モバイル ページを設定しています。ページを開いたときに最初の 10 のみを表示する方法に関する提案と、クリックするとすべてを表示できる下部の [詳細] ボタンを使用します。私のスクリプトは次のとおりです。

<body> 

<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">body</h1>

</div>
<ul  data-role="listview" data-inset="true" data-filter="false">
<li><a href="http://www.mydomain.co.nz/users/262/">Feature listings</a>   </li>

<ul data-role="listview" data-filter="false">

<table>

<li>
    <a href="/users/264/properties/50473">
        <img src="/media/2012/11/01/011528_47689.jpg?m=resize&o[geometry]=80x60&s=f9e49fbb929e8d1b" />          
        <h3>7C/192 Willis Street</font></font></font>, Beijing</h3>
    <p>Buyer Enquiry Over $305,000<br />Ref: 47689</p></a>
</li>  

<li>
    <a href="/users/264/properties/50474">
        <img src="/media/2012/11/01/011533_47722.jpg?m=resize&o[geometry]=80x60&s=b4482c7638c512b4" />          
        <h3>606/35 Abel Smith Street</font></font></font>, Te Aro</h3>
        <p>Tender<br />Ref: 47722</p></a>
</li>

<li>
    <a href="/users/264/listings/50476">
        <img src="/media/2012/11/01/011539_47691.jpg?m=resize&o[geometry]=80x60&s=66def46f1524e177" />
        <h3>8/34 William Street</font></font></font>, Hataitai</h3>
        <p>Buyer Enquiry Over $280,000<br />Ref: 47691</p></a>
</li>  ........
....... over 50 elements
4

1 に答える 1

3

li要素でスライスを使用してみて、それらを非表示にすることができます。

まず、CSS でそれらをすべて非表示にします。

li { display: none; }

次に、JavaScript で最初の 10 個を表示し、クリック イベント リスナーを設定して非表示のものを表示します。

$('li').slice(0,10).css('display', 'block');
$('#more-button').click(function() {
    $('li:hidden').show();
});
于 2012-11-02T01:05:54.200 に答える