Question

我想对图片库进行分页，因为它们应该是一个包含2-8的下拉列表如果我点击2它应该只显示第一行中的两个图像，其余图像应该休闲第一行而不需要隐藏

example: if i click on 2 (consider their will be 9 images in gallery)
[1,2]
[3,4]
[5,6]
[7,8]
[9,0]

if i click on 3

[1,2,3]
[4,5,6]
[7,8,9]

like wise

这是我的代码

http://jsfiddle.net/rajaeerasd/GbA2C/

 <!DOCTYPE html>
    <html>
    <head>  

        <title>Easylib Soft</title>
        <link rel="stylesheet" href="style.css">
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
        <script type="text/javascript" src="https://sites.google.com/site/alauddinansari7/jColorPicker.js"></script>
        <script type="text/javascript">

        $(document).ready(function(){
            $("#colorPicker").ColorPicker({selectedColor:'#fff', onSelect:
                      function(color){
                document.body.bgColor=color;
                      }
            });          
        });             
    </script>



        <!--[if (gte IE 6)&(lte IE 8)]> 
            <script src="selectivizr.js"></script>
        <![endif]-->
        <style>


            #about{
                color: #999;
                text-align: center;
                font: 0.9em Arial, Helvetica;
            }

            #about a{
                color: #777;
            }       
        </style>
    </head>

    <body>
    <div id="colorPicker">colorPicker</div>
      <ul class="menu">
        <li tabindex="1">
          <a href="http://www.google.co.in/"><span class="title">One</span></a>

        </li>
        <li tabindex="1">
          <span class="title">Two</span> 

        </li>
        <li tabindex="1">
          <span class="title">Three</span> 

        </li>
        <li tabindex="1">
          <span class="title">Four</span> 

        </li>
        <li tabindex="1">
          <span class="title">Five</span> 

        </li>
        <li tabindex="1">
          <span class="title">Six</span> 

        </li>
        <li tabindex="1"> 
          <span class="title">Seven</span>

        </li>
        <li tabindex="1"> 
          <span class="title">Eight</span>

        </li>
        <li> 
          <span class="title">Nine</span>
        </li>     
      </ul>




        <!-- BSA AdPacks code -->
        <script>
          (function(){
            var bsa = document.createElement('script');
               bsa.async = true;
               bsa.src = 'www.google.com';
            (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
          })();
        </script> 

    </body>
    </html>

Answer 1

我有点不清楚你的意思是什么'下拉'（一个新的，单独的div？）但不管怎样，如果我是你，我会尝试一种方法

1。）为每个可点击的div分配一个uniuque id 2.）为所有可点击的div添加一个类定义（相同的类id） 3.）添加jquery以检测具有新类ID的任何项目的点击 4.）点击时获取被点击的div的id 5.）基于'id'（假设您使用div的编号对应于id - 所以div＃2将具有id = 2等），然后您可以使用它并在新的div中

a。）显示结果的div，（清除或删除它的任何旧结果）

b。）追加基于从cliked div id到9的计数而构建的HTML ...所以如果用户点击＃4，则会导致你的新div显示6'结果'...然后它只需要做一个循环来构建所需的HTML来显示结果，基于点击的id的id，以及返回结果的总数（记住你知道总共有9个。我会用一个简单的表结构，用于在循环中构建/编写HTML，并使用计数器跟踪每行结果，然后当counter = 9时，只需完成结果表，新div应该包含结果。

不确定这一切是否有意义，但这将是我将采取的最初方法，可能是更简单的方法来处理它。

图像库的简单分页

1 个答案: