Question

这个问题与此处的其他一些问题非常类似，但有一些问题。 div的数量可以是none和12之间的任何值，并且每个要旋转的对象的命名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。

Answer 1

只有2个div才能完美，因为nextAll()为您提供了唯一存在的div。如果有多个div nextAll()给你除了第一个div之外的所有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;
});

没有对它进行过测试，但你明白了。

Answer 2

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

$('.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();
});

Answer 3

您可以使用元素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();

});

这是一个简化的答案。显然你会想要添加一些逻辑来检查是否有下一个/前一个元素，并根据它隐藏下一个/上一个按钮，但这样可以让你朝着正确的方向前进。

Here's a complete example fiddle

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

通过Prev＆amp ;;旋转通过DIV下一个按钮;未知的div

3 个答案:

Here's a complete example fiddle