重置

Question

我需要在幻灯片上有一个后退按钮才能返回上一个div。我做了几次测试但没有成功。

有我的JS

function SlideOut(element) {

$(".opened").removeClass("opened");
$("#" + element).addClass("opened");
$("#content").removeClass().addClass(element);

}
$("#content div").click(function () {
var move = $(this).attr('data-move');
SlideOut(move);
});

有演示链接： http://jsfiddle.net/VA5Pv/

感谢

Answer 1

您可以创建历史记录。我用一些脏代码编辑了小提琴，但想法就在那里：

var history = [];
var last;

$("#content div").click(function () {
    var move = $(this).attr('data-move');
    if (last) history.push(last);
    last = move;
    SlideOut(move);
});

$("#back").click(function () {
    SlideOut(history.pop());
    return false;
});

http://jsfiddle.net/VA5Pv/1/

基本上：将“move”变量存储在历史数组中。如果要返回，请从历史数组中弹出最后一个值。

Answer 2

尝试以下方法：

$('.anim button').click(function(){$(this).parent().removeClass('opened');});

我将此分配给div rouge中的按钮。但目标可能是您希望用户点击的div中的任何内容......

见这里：JSfiddle

Answer 3

重置

如果您只想返回初始状态（未打开幻灯片），只需添加以下内容：

$('button.close').click(function() {
    $('.opened').removeClass('opened');
});

在这种情况下，追踪完整的历史记录是过度的。

演示：http://jsfiddle.net/VA5Pv/4/

历史

建议使用历史记录。他们中的大多数都使用了一个数组来跟踪用户打开的幻灯片，然后简单地从中弹出“返回”。

var history = [];

$('#content div').click(function() {
    var move = $(this).attr('data-move');
    history.push(move);
    SlideOut();
});

$('button.close').click(function() {
    history.pop();
    SlideOut();
});

function SlideOut() {
    var element = history[history.length - 1];
    // ... same as before ...
}

如果您希望允许用户以任何顺序打开任意数量的幻灯片，并且始终使用按钮返回之前打开的幻灯片，则必须执行此操作。

序列

另一种解决方案可能是将所有幻灯片ID存储在一个数组中，并保留一个计数器，告诉您哪张幻灯片。返回将意味着如果计数器尚未为零，则递减计数器，然后切换到特定的幻灯片。

如果您尝试创建类似于演示文稿的内容，其中每个幻灯片按顺序打开并且过渡完全是线性的，那么这将非常有用。

这就是为什么我要求你澄清你想要建立什么。根据使用案例的不同，解决方案可能会有很大的不同，而且比您实际需要的解决方案复杂得多。

感谢您接受我的回答，欢迎来到StackOverflow。即使他们没有充分回答您的问题，也请随意提出您认为有帮助的任何答案。

Answer 4

以下是DEMO

<div id="fullContainer">
    <div id="right" class="anim"></div>
    <div id="rouge" class="anim">Hello world!
        <button class="close">Close</button>
    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            <div data-move="right">Open Right</div>
            <div data-move="rouge">Open Rouge</div>
            <div id="back">Back</div>
        </div>

function SlideOut(element) {
    if(element == undefined) {
        $('#back').hide();
    }
    $(".opened").removeClass("opened");
    $("#" + element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function () {
    var move = $(this).attr('data-move');
    $('#back').show();
    SlideOut(move);
});

幻灯片后的后退按钮

4 个答案:

重置

历史

序列