jquery点击div显示更多结果

时间:2017-03-13 20:16:18

标签: jquery

我正试图通过php搜索显示更多结果。基本页面应显示前五个结果,每次单击“显示更多结果”,应弹出更多结果。下面的脚本完美地完成了第一部分(显示前5个结果),但第二部分不起作用。我已经尝试了很多选择,但似乎没有让它工作,任何人都知道出了什么问题

jQuery的:

PS C:\src\powershell> Get-Content .\fr-btest2.ps1
$files1 = @(
, @(4, 1024)
, @(2*3, 4*5)
)

$files1
$files1.GetType()
$files1.Length
$files1.Count

'============'

$files2 = @(
, @(4, 1024)
, @((2*3), (4*5))
)

$files2
$files2.GetType()
$files2.Length
$files2.Count
PS C:\src\powershell> .\fr-btest2.ps1
Method invocation failed because [System.Object[]] does not contain a method named 'op_Multiply'.
At C:\src\powershell\fr-btest2.ps1:3 char:5
+ , @(2*3, 4*5)
+     ~~~~~~~~
    + CategoryInfo          : InvalidOperation: (op_Multiply:String) [], RuntimeException
    + FullyQualifiedErrorId : MethodNotFound

4
1024

IsPublic IsSerial Name                                     BaseType
-------- -------- ----                                     --------
True     True     Object[]                                 System.Array
2
2
============
4
1024
6
20
True     True     Object[]                                 System.Array
2
2

PHP / HTML:

$(document).ready(function(){

        var initialresults = 5;

        var counter = 0;

        while (counter < initialresults){

            $('.' + counter).show();        
            counter++;

        };

        $(".showMore").click(function(){

            var initialresults = initialresults + 5;
            var counter = 0;

            while (counter < initialresults){

                $('.' + counter).show();        
                counter++;

            }

        });


    } );

2 个答案:

答案 0 :(得分:0)

摆脱

var initialresults = initialresults + 5;

并替换为

initialresults = initialresults + 5;

计数器回到0意味着你每次都会出现所有东西。不确定你是否想要那个(即0-5,然后0-10,然后0-15对0-5,6-10,11-15)。

答案 1 :(得分:0)

一些问题,从小东西开始。 ID应该是唯一的,因此#show_result应该是唯一的,例如id='show_result_'.$counter

数字不是有效的CSS类,所以代替.6应该是类似.result_6

  $(document).ready(function(){   

    var initialresults = 5;

    var counter = 0;

    while (counter < initialresults){

        $('.result_' + counter).css('display', 'block');        
        counter++;

    };


        $(".showMore").click(function(e){
            e.preventDefault();
            console.log('initialResults is undefined', initialresults)
            //to keep things dynamic lets just find all visible results and count them
            var numberShowing = $('.showResults:visible').length;
            console.log(numberShowing); //5
            var visibleResults = numberShowing + 5
            var counter = 0;

            while (counter <= visibleResults){
                $('.result_' + counter).css('display', 'block');        
                counter++;
            }
        })
  });

https://jsbin.com/rasenuqoco/edit?html,js,output