Question

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

在这4个div中的每一个中，我有两个按钮可以在这4个div之间导航。

但我不知道如何做到这一点，因为默认情况下，content-1 div是出现的div而其他的是hide。

当我点击右键时，我想显示content-2 div，但是当我点击左键时，我想返回content-1 div，但是它不能像这样工作，在内容中 - 当我点击左侧按钮而不是显示内容-1 div时显示内容-4 div，我不知道怎么做。

我在这里有我的例子，所以你可以更好地表达：http://jsfiddle.net/1t2xfw7e/

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

Answer 1

不改变html标记。（这是有效的，但不是最佳的或完整的。它只是告诉你另一种方法）：

JS-FIDDLE

$(document).ready(function() {
    $(".content a").on("click", function(e){

        if (e.target.className=="right") {
            $(this).parent().next().show();
            $(this).parent().hide();
        }
        else if (e.target.className=="left") {
            $(this).parent().prev().show();
            $(this).parent().hide();
        }
    });
});

Answer 2

U-40

$(document).ready(function() {
    $(".navigate").click(function(e) {
        e.preventDefault();
        
        var $this = $(this);
        
        //hide this one
        $this.parent().hide();
        //show the one that has the matching class from the data element.
        $('.'+ $this.data('show')).show();
    });
});

Answer 3

在事件处理程序中使用$(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;
    });
});

http://jsfiddle.net/divyanthj/rtvn7L49/1/

Answer 4

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

Answer 5

此代码有帮助的原因，根据您的规范，您要么左键单击或右键单击并显示或隐藏内容-1或内容-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;
});

在.content div中的4个div之间导航

5 个答案: