Question

我正在创建投资组合部分，其中每个投资组合项目都显示为图像，每个投资组合项目都有自己的div，它隐藏并包含有关该项目的更多信息。当用户点击某个项目组合项目（图像）div时，会显示该项目的更多信息。每个包含更多信息的div都有两个类， portf- [nid] 和 portf （[nid]是节点ID，我在Drupal工作，这个类有[nid]帮助我用该项目的更多信息div来定位投资组合项目。）

每个更多的信息div包含项目列表（下一个和上一个）的箭头，我需要让它们起作用，所以当用户点击之前我需要隐藏当前并显示上一个项目（如果它存在）在旁边隐藏当前并显示下一个项目（如果存在）。

我的标记看起来像：

<div class="portf-3 portf">
//some elements
</div>

<div class="portf-6 portf">
//some elements
</div>

<div class="portf-7 portf">
//some elements
</div>

我的问题是如何隐藏我当前所在的div并显示之前（或下一个）。例如：如果当前显示div为class portf-6 并且用户点击上一个箭头，则此div被隐藏，并且正在显示带有 portf-3 类的div

隐藏/显示div不是问题，但是如何检查当前div上方/下方是否存在div并将该div定位在当前div之上或之下？

Answer 1

你在这里：

function GoToPrev()
{
   var isTheLast = $('.portf:visible').prev('.portf').length === 0;
   if(!isTheLast)
   {
      $('.portf:visible').hide().prev().show();
   }
}

function GoToNext()
{
   var isTheLast = $('.portf:visible').next('.portf').length === 0;
   if(!isTheLast)
   {
      $('.portf:visible').hide().next().show();
   }
}

Answer 2

要检查是否存在prev / next元素，您可以使用.length属性，如下所示

if($('.portf:visible').prev('.portf').length > 0) // greater than 0 means present else not

下一个元素

if($('.portf:visible').next('.portf').length > 0)

Answer 3

由于您还需要更新下一个和上一个按钮，我建议采用更加结构化的方法：

function update(delta) {
    var $portfs = $('.portf');
    var $current = $portfs.filter(':visible');
    var index = $portfs.index($current) + delta;
    if (index < 0) {
       index = 0;
    }
    if (index > $portfs.length){
        index = $portfs.length;
    }
    $current.hide();
    $portfs.eq(index).show();
    $('#prev').toggle(index > 0);
    $('#next').toggle(index < $portfs.length-1);
}

$('#prev').click(function () {
    update(-1);
});
$('#next').click(function () {
    update(1);
});

// Hide all initially
$('.portf').hide();
// Show the first with appropriate logic
update(1);

JSFiddle： http://jsfiddle.net/TrueBlueAussie/xp0peoxw/

这使用一个常用函数，该函数采用增量方向值，并使范围上限决定隐藏/显示下一个/上一个按钮的时间。

代码可以进一步缩短，但我的目标是逻辑的可读性。

如果正确显示下一个/上一个按钮，则不需要进行范围检查，因此简化为：

function update(delta) {
    var $portfs = $('.portf');
    var $current = $portfs.filter(':visible');
    var index = $portfs.index($current) + delta;
    $current.hide();
    $portfs.eq(index).show();
    $('#prev').toggle(index > 0);
    $('#next').toggle(index < $portfs.length-1);
}

JSFiddle： http://jsfiddle.net/TrueBlueAussie/xp0peoxw/1/

使用jQuery定位前一个元素

3 个答案: