Javascript 使用jQuery将上一个元素作为目标

我正在创建portfolio部分，其中每个portfolio项都显示为一个图像，每个portfolio项都有自己的div，该div是隐藏的，包含关于该项的更多信息。当用户单击某个公文包项目（图像）div时，将显示该项目的更多信息。每个具有更多信息的div都有两个类，portf-[nid]和portf（[nid]是节点ID，我在Drupal中工作，这个具有[nid]的类有助于我针对具有该项目的更多信息div的投资组合项目）

每个more info 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并显示上一个（或下一个）。例如：如果当前显示的是带有类portf-6的div，并且用户单击上一个箭头，则该div将被隐藏，并且显示带有类portf-3的div

---

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

要检查上一个/下一个元素是否存在，可以使用

.length

属性，如下所示

if（$（'.portf:visible'）.prev（'.portf'）.length>0）//大于0表示存在，否则不存在

下一个元素也一样

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

给你：

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

---

由于您还需要更新“下一步”和“上一步”按钮，因此我建议采用更结构化的方法来完成整个过程：

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);

函数更新（增量）{
变量$portfs=$（'.portf'）；
var$current=$portfs.filter（':visible'）；
风险值指数=$portfs.index（$current）+delta；
如果（指数<0）{
指数=0；
}
如果（索引>$portfs.length）{
索引=$portfs.length；
}
$current.hide（）；
$portfs.eq（index.show（）；
$（'#prev'）。切换（索引>0）；
$（'#next'）.toggle（索引<$portfs.length-1）；
}
$（'#prev'）。单击（函数（）{
更新（-1）；
});
$（“#下一步”）。单击（函数（）{
更新（1）；
});
//最初隐藏所有
$（'.portf'）.hide（）；
//用适当的逻辑显示第一个
更新（1）；

JSFiddle:

这使用了一个通用函数，该函数接受增量方向值，并决定何时隐藏/显示下一个/上一个按钮的范围上限

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

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

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);
}

函数更新（增量）{
变量$portfs=$（'.portf'）；
var$current=$portfs.filter（':visible'）；
风险值指数=$portfs.index（$current）+delta；
$current.hide（）；
$portfs.eq（index.show（）；
$（'#prev'）。切换（索引>0）；
$（'#next'）.toggle（索引<$portfs.length-1）；
}

---

jsIDLE:

为此创建一个提琴。请同时添加上一个按钮和下一个按钮html，并输入您迄今为止尝试过的代码。注意：当您点击第一个/最后一个条目时，还需要禁用上一个按钮或下一个按钮。请提供更多的HTML以获得更好的答案：）由于当前的答案仅说明了最简单的情况，我添加了一些内容来解释我之前的评论。当检查0/非零时，一个简单的布尔测试就足够了<代码>>不需要0。@TrueBlueAussie，是的，你是对的。我只是把它放在这里，这样OP应该有清楚的想法，如果不知道

if（length）

code为什么要引入一个额外的负数（例如

！isTheLast

）？只需反向检查。

如果（$（'.portf:visible'）.prev（'.portf'）.length）

同样可读、更短，并且避免添加变量（或全局变量）：）非常感谢，这就是我要找的。谢谢@TrueBlueAussie，这是更好、更短的方式…@TrueBlueAussie，你是对的，它不应该是全球性的：）