Jquery工具覆盖：PHP的foreach循环不工作

Question

我把jquery工具的覆盖在我的网站显示在几个覆盖项目的信息。这工作相当好，但我一直试图'自动'的代码来读取新的项目，并加载他们在覆盖。什么发生看起来不错，但无论我点击哪个项目，覆盖总是加载第一个项目的内容...

我做了大量的谷歌搜索和复制粘贴到这么远，我不是（尚）多一个程序员，我希望的代码不吓唬你们.. ;-)

总之，这里是一个链接：http://www.wgwd.nl/test

如果你点击“项目”正常的div打开一个加载它找到的项目（现在两个）。当你点击一个时，它会在3个叠加层中打开该内容。如上所述，不幸的是，它总是加载相同的内容，而与您点击的项目无关。

我试图给JScript分配一个独特的函数名称（用项目文件名中的php生成），但似乎不起作用。

任何想法？这里是我的代码：

<? 
    //reads projectfolder and distills 
    //a basename out of the project description.txt 
    $textfiles = glob('content/projects/*.txt', GLOB_BRACE); 
    foreach ($textfiles as $textfile) { ?> 
     <div id="details"> <? 
      $pad = pathinfo ($textfile); 
      $base_name = basename($textfile,'.'.$pad['extension']); 

      // the link that opens the overlays. Don't think the "id" tag is nescessary 
      echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?> 

      <!-- defines overlay, hidden by default --> 
      <div id="dragwindow1" class="overlay ol1"> 
       <a class="close"></a> 
       <? 
        include ('content/projects/'.$base_name.'/content.txt'); 
       ?> 
      </div> 
     </div> 
     <? 
     // the description of each project 
     include ($textfile); 
     ?> 

     <script> 
      // within the foreach open all overlays with function name $base_name 
      var <?=$base_name?> = function() { 
       $("a[rel]").each(function() { 
        $(this).overlay().load(); 
       }); 
      } 

     </script> 
     <hr /> 
    <? } //end foreach ?> 
</div> 

<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work --> 
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an> 
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a> 
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a> 

<script type="text/javascript"> 
$(function projects() { 
    // positions for each overlay 
    var positions = [ 
     [120, '15%'], //uppper left, #1 
     [70, '60%'], // lower left, #2 
     ['60%', '40%'], // lower right, #3 
    ]; 

    // setup triggers 
    $("a[rel]").each(function(i) { 

     $(this).overlay({ 
      // common configuration for each overlay 
      oneInstance: false, 

      // setup custom finish position 
      top: positions[i][0], 
      left: positions[i][1], 
     }); 
    }); 
}); 
</script> 

Thx提前！

编辑：我编辑的代码，省略所有这些都不相关 问题依然存在：Javascript只返回foreach循环中第一个调用的内容。无论如何要为PHP中的每个循环生成多个javascript实例吗？

Answer 1

已解决！在一个朋友的帮助下，他重新定义了Jquery Tools中的多个Overlays是如何工作的（并且应该在第一个地方工作...）

没有太多的介绍，以下是未来参考的代码：

基本上诀窍是：

// open all overlays 
function openAll(currentOverlays) { 
    $(currentOverlays).each(function() 
    { 
     $(this).overlay().load(); 
    }); 
} 

完整的页面现在是这样的：

<script type="text/javascript"> 
$(function() { 
    // positions for each overlay 
    var positions = [ 
     ['60%', 540], // lower right, #3 
     [80, '65%'], // lower left, #2 
     [120, '12%'], //uppper right, #1 

     ]; 

    // setup triggers 
    $("div.overlay").each(function(i) { 
     $(this).overlay({ 
      // some configuration for each overlay 

      // positioning the overlays 
      top: positions[i % 3][0], 
      left: positions[i % 3][1] 
     }); 
    }); 
}); 

// open all overlays 
function openAll(currentOverlays) { 
    $(currentOverlays).each(function() 
    { 
     $(this).overlay().load(); 
    }); 
} 

// close all overlays 
function closeAll(currentOverlays) { 
    $(currentOverlays).each(function() 
    { 
     $(this).overlay().close(); 
    }); 
} 
</script> 

<div id="projectstarter"> 
    <h2>Projects</h2> 

    <div class="maindetails"> 
     <a class="close"></a> <!-- defines a close button for the overlay --> 

     <? 
     $textfiles = glob('content/projects/*.txt', GLOB_BRACE); 
     rsort($textfiles); 
     foreach ($textfiles as $textfile) { 

      $pad = pathinfo ($textfile); 
      $base_name = basename($textfile,'.'.$pad['extension']); 
      echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">'; 
      echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>'; 
      include '$textfile'; //project description 

     } // end MAIN foreach ?> 
    </div> 
</div> 

<div id="projects"> 
<? 
foreach ($textfiles as $textfile) { 
     $pad = pathinfo ($textfile); 
     $base_name = basename($textfile,'.'.$pad['extension']); ?> 
      <div id="dragwindow3" class="<?=$base_name?> overlay ol3"> 
       <a class="close"></a> 
       <h2>Media</h2> 
       <div class="details"> 
        // include media here 
       </div>    
      </div> 


      <div id="dragwindow2" class="<?=$base_name?> overlay ol2"> 
       <a class="close"></a> 
       <h2>Credits</h2> 
       <div class="details"> 
        // include credits here 
       </div> 
      </div> 

      <div id="dragwindow1" class="<?=$base_name?> overlay ol1 "> 
       <a class="close"></a> 
       <h2>Content</h2> 
       <div class="details"> 
        // include content here 
       </div> 
      </div> 

    <? } ?> 
<script> 
    $("#projectstarter").overlay(); 
    $("#projectstarter").draggable().resizable({ghost: true}); 
    $(".ol1").draggable().resizable({ghost: true}); 
    $(".ol2").draggable().resizable({ghost: true}); 
    $(".ol3").draggable().resizable({ghost: true}); 
</script>