0

我想为图片库进行分页，如果我点击 2，它们应该是一个包含 2-8 的下拉菜单，它应该只在第一行显示两个图片，其余图片应该在第一行闲置，无需隐藏

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>
4

1 回答 1

0

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

1.）为每个可点击的 div 分配一个唯一的 id 2.）为所有可点击的 div 添加一个类定义（相同的类 id） 3.）添加 jquery 以检测对具有新类 id 的任何项目的点击 4。 ) 单击时获取单击的 div 的 id 5.) 基于该“id”（假设您使用 div 的编号与 id 相对应——因此 div #2 将具有 id=2 等）您可以然后在一个新的 div 中使用它

a.) 显示结果的 div，（清除或删除其中的任何旧结果，我猜）

b.) 附加基于从点击的 div id 到 9 获取计数而构建的 HTML...因此，如果用户单击 #4，它将导致您的新 div 显示 6 个“结果”...然后它只是一个根据单击 whick 的 id 和返回结果的总数（请记住，您知道总共有 9 个。我会使用一个简单的表来构建所需的 HTML 以显示结果）在循环中构建/编写 HTML 的结构并使用计数器来跟踪每行结果，然后当计数器 = 9 时，只需完成结果表，新的 div 应该包含结果。

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

于 2013-08-15T13:47:49.750 回答