Javascript 在.content div内的4个div之间导航

我有一个div.content，在这个div里面我有4个div（content-1，content-2，content-3，content-4）

在这4个分区中，我有两个按钮在这4个分区之间导航

但我不知道如何正确地执行此操作，因为默认情况下，content-1div是显示的div，而其他div是隐藏的

当我点击右键时，我想显示content-2 div，但当我点击左键时，我想返回content-1 div，但它不是这样工作的，在content-2 div中，当我点击左键中的to而不是显示content-1 div时，它显示content-4 div，我不知道怎么做

我这里有我的例子，这样你可以更好地理解：

Jquery：

$(document).ready(function() {
    $(".left").click(function() {
        $(".content-1").hide();
        $(".content-4").show();
        return false;
    });
    $(".right").click(function() {
        $(".content-1").hide();
        $(".content-2").show();
        return false;
    });
});

$（文档）.ready（函数（）{
$（“.navigate”）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
//把这个藏起来
$this.parent（）.hide（）；
//显示数据元素中具有匹配类的类。
$（'.+$this.data（'show'））.show（）；
});
});

试验
内容1

内容2

内容3

内容4

第1页，共4页

在事件处理程序中使用
$（this）.parent（）.prev（）
和
$（this）.parent（）.next（）

$(document).ready(function() {
    $(".left").click(function() {
        $(this).parent().hide()
        $(this).parent().prev().show();
        return false;
    });
    $(".right").click(function() {
        $(this).parent().hide()
        $(this).parent().next().show();
        return false;
    });
});

无需更改html标记。（这是可行的，但不是最佳或完整的。它只是向您展示另一种方法）：


由于div相似，我认为此解决方案是有效的：

 function getCurrIndex(obj, isLeft) {
        var re = /content-([0-9])/gi
        var cDiv = re.exec($(obj).parent().prop('className'));
        if (cDiv.length == 2) {
            var cDivIndex = parseInt(cDiv[1]);
            if (isLeft == true) {
                cDivIndex -= 1;
            } else {
                cDivIndex += 1;
            }
            if (cDivIndex <= 0) {
                cDivIndex = 4;
            } else {
                if (cDivIndex >= 4) {
                    cDivIndex = 1;
                }
            }
        }
        return cDivIndex;
    }
    $(document).ready(function() {
        $(".left").click(function() {
            $(this).parent().hide();
            $(".content-" + getCurrIndex(this, true)).show();
            return false;
        });
        $(".right").click(function() {
            $(this).parent().hide();
            $(".content-" + getCurrIndex(this, false)).show();
            return false;
        });
    });

函数getCurrIndex（obj，isLeft）{
var re=/content-（[0-9]）/gi
var cDiv=re.exec（$（obj.parent（）.prop（'className'））；
如果（cDiv.length==2）{
var cDivIndex=parseInt（cDiv[1]）；
if（isLeft==true）{
cDivIndex-=1；
}否则{
cDivIndex+=1；
}
如果（cDivIndex=4）{
cDivIndex=1；
}
}
}
返回cDivIndex；
}
$（文档）.ready（函数（）{
$（“.left”）。单击（函数（）{
$（this.parent（）.hide（）；
$（“.content-”+getCurrIndex（this，true））.show（）；
返回false；
});
$（“.right”）。单击（函数（）{
$（this.parent（）.hide（）；
$（“.content-”+getCurrIndex（this，false））.show（）；
返回false；
});
});

此代码之所以有用，是因为根据您的规格，您需要单击左侧或右侧，并显示或隐藏content-1或content-2。如果要显示content-3或content-4，则此代码将变得更复杂

尽管对本文有评论，但使用返回多个“节点”的css类选择器并没有问题

$(".left").click(function () {
    $(".content-2").hide();
    $(".content-1").show();
    return false;
});
$(".right").click(function () {
    $(".content-1").hide();
    $(".content-2").show();
    return false;
});

---

你的问题是，有多个左类和右类，它们如何运行取决于它们属于谁。一个可能的解决方案可能是将下一个和上一个类作为数据元素存储在链接上，以知道下一个要转到哪个类。可能类似这样。欢迎使用堆栈溢出！请添加一些解释，说明此代码为何有助于OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅。

$(".left").click(function () {
    $(".content-2").hide();
    $(".content-1").show();
    return false;
});
$(".right").click(function () {
    $(".content-1").hide();
    $(".content-2").show();
    return false;
});