0

这个问题与这里的其他几个问题非常相似，但有所不同。div 的数量可以是无到十几个之间的任何值，并且每个要旋转的对象的命名 DIV 都是相同的。下面的代码：

PHP：

if($job->getPictureGalleries() != null){
$gallerys = $job->getPictureGalleries();
foreach($gallerys as $gallery){
    $gallery = Doctrine_Core::getTable('Gallery')->find($gallery);
    echo "<div class=\"galleries\">";
    include_partial('gallery/record', array('gallery' => $gallery));
    echo "</div>";
}
if(count($gallerys) > 1){
    $buttons = <<<EOD
<table style="box-shadow: 0.2em 0.2em 0.3em grey; width: 60%; margin-left: 20%; margin-top: 15px; background-color: whitesmoke; border: 1px solid grey; border-radius: 15px; height: 20px">
<tr style="width: 100%; ">
 <td style="width: 33%; text-align: right">
    <a href="#" id="previous_link"><img src="/web/images/previous.png" height="35" width="35" /></a>
 </td>
 <td style="
     width: 33%;
     color: #444444; 
     font-weight: bold;
     text-align: center;
     text-shadow: 0.1em 0.1em 0.3em grey;
 ">
    More Galleries
 </td>
 <td style="width: 33%">
    <a href="#" id="show_next_gallery" ><img src="/web/images/next_1.png" height="35" width="35" /></a></div>
 </td>
 </tr>
 </table>
 EOD;
    echo $buttons;
}
};

jQuery：

$(document).ready(function() {
if($('.galleries').size() > 1){
   $('.galleries').hide();
   $('.galleries').first().show();

   $("#show_next_gallery").click(function() {
       $('.galleries').first().hide();
       $('.galleries').nextAll().show();
        return false;
      });

   $("#previous_link").click(function() {
       $('.galleries').hide();
       $('.galleries').prevAll().show();
        return false;
      });
}

});

上面的代码在只检索两个对象时工作得很好，但除此之外，当单击下一个按钮时一切都崩溃了——导致显示多个 div。

4

3 回答 3

1

它只适用于 2 个 div，因为nextAll()它为您提供了唯一存在的 div。如果有多个 div ，则为nextAll()您提供除第一个之外的所有 div。

我能想到的可能的解决方案是为每个 div 分配某种数字标识符，例如：

<div class="galleries" num="1">...</div>
<div class="galleries" num="2">...</div>
<div class="galleries" num="3">...</div>

你的jQuery：

//hide all galleries except first
$('.galleries:not([num=1])').hide();
$("#show_next_gallery").click(function() {
    var curr = $('.galleries:visible').attr('num');
    var next = curr + 1;
    $('.galleries[num='+curr+']').hide();
    $('.galleries[num='+next+']').show();
    return false;
});

$("#previous_link").click(function() {
    var curr = $('.galleries:visible').attr('num');
    var prev = curr - 1;
    $('.galleries[num='+curr+']').hide();
    $('.galleries[num='+prev+']').show();
    return false;
});

没有测试过，但你明白了。

于 2013-04-22T13:49:22.007 回答
0

您可以使用元素index()来定位下一个/上一个元素。此外，您不需要绑定两个单独的点击处理程序。只需用于e.target确定单击了哪个元素：

$('#show_next_gallery, #previous_link').click(function(e) {     
    e.preventDefault();
    
    var currentIdx = parseInt($('div.galleries:visible').index('div.galleries'), 10);
    var nextIdx = ($(e.target).is('#show_next_gallery')) ? currentIdx + 1 : currentIdx - 1;
    
    $('div.galleries:eq(' + currentIdx + ')').hide();
    $('div.galleries:eq(' + nextIdx + ')').show();
    
});

这是一个简化的答案。显然，您需要添加一些逻辑来检查是否存在下一个/上一个元素，并基于此隐藏下一个/上一个按钮，但这应该会让您朝着正确的方向前进。

这是一个完整的示例小提琴

.next()注意：您可以为此使用 jQuery ，因为您.galleries是一个接一个，但是，一旦您在它们之间添加其他元素，整个事情就会崩溃。使用索引并将选择器传递给索引可确保您始终在正确的位置获得正确的元素。

于 2013-04-22T14:08:15.070 回答
0

请考虑以下内容（考虑到当您点击最后一个元素时您希望回滚到第一个元素）：

$('.galleries:not(:first)').hide();

$('#show_next_gallery').click(function() {
  var cur = $('.galleries:visible').hide();
  var next = cur.next();
  // Need to handle rolling to front when on last entry
  if(next.size() === 0) {
    next = $('.galleries:first');
  }
  next.show();
});

$('#show_prev_gallery').click(function() {
  var cur = $('.galleries:visible').hide();
  var prev = cur.prev();
  // Need to handle rolling to back when on first entry
  if(prev.size() === 0) {
    prev = $('.galleries:last');
  }
  prev.show();
});
于 2013-04-22T14:06:04.263 回答