Question

我有一点jquery知识，我想知道我做错了什么。我想在页面上放置多个画廊，但我不知道如何设置代码以正确加载它们。

Answer 1

javascript只是为了“打开魔法”。将您需要的所有html放在页面上，然后使用javascript初始化它。最简单的理解方法（尽管不是最有效的方法）就是制作许多代码副本。

填空：

<script language="javascript" type="text/javascript">
   $(document).ready(
   function (){
       $("#pikame1").PikaChoose();
       $("#pikame2").PikaChoose();
       $("#pikame3").PikaChoose();
       ...
   });
</script>

填空：

<ul id="pikame1" class ="pikame clearfix">
...
</ul>

<ul id="pikame2" class ="pikame clearfix">
...
</ul>

<ul id="pikame3" class ="pikame clearfix">
...
</ul>

...

完全是这样的：

.pikame{
 margin-left: 80px;
 }
 .pika_main{
 width:420px;
 margin-top: 100px;
 }

 .pikame li{
    margin:5px;
    margin-top:20px;
    float: left;
    border:1px solid #3e3f41;
    position:relative;
    overflow:hidden;}

/**ADVANCED OPTIONS**/
.pikame li img{position:relative;cursor:pointer;}
.pika_main img{border:2px solid #3e3f41;}
.pika_main{position: relative;margin:0 auto;margin-left:60px; margin-top:32px;}
.pikachoose li{float:left;position:relative;overflow:hidden;list-style:none;}
.pika_play{position:absolute;top:7px;z-index:1;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;}
.pika_play img{border:none !important;}
.pika_caption{width:100%;height:30px;text-align:center;}
.pika_navigation a{font-size: 12px;color:white;text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

如果有任何问题，请告诉我，因为我已经改变了css以免过度冗余，可能会干扰现有的样式。

Answer 2

您可以通过为每个图库添加唯一ID来手动设置

  $(document).ready(
  function (){
      $("#pikame1").PikaChoose();
      $("#pikame2").PikaChoose();
      $("#pikame3").PikaChoose();
      ...
  });

或者您也可以为您的所有图库提供一个通用的CSS名称，然后运行每个函数来一次处理它们。

  $(document).ready(function (){
      $('.pikame').each(function(){
           $(this).PikaChoose();
      });
  });

唯一的问题是你的css部分中的css选择器与具有特定id的元素有关。你也可以创建更多具有不同ul id的css，或者你也可以更改这些选择器以选择不是id的类

例如：

 ul#pikame{
   margin-left: 80px;
 }

到此：

 ul.pikame{
   margin-left: 80px;
 }

注意选择器$（'＃pikame1'）和$（'。pikame'）。第一个引用id而第二个引用css。

我想使用相同的jquery添加多个库

2 个答案: