4

我需要在幻灯片上有一个后退按钮才能返回上一个 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/

谢谢

4

4 回答 4

2

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

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/

基本上：将“移动”变量存储在历史数组中。当您想返回时，将最后一个值从历史数组中弹出。

于 2013-08-09T15:57:50.887 回答
0

尝试以下操作：

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

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

看这里：JSfiddle

于 2013-08-09T16:02:38.517 回答
0

重置

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

$('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。即使他们没有充分回答您的问题，也可以随意对您认为有帮助的任何答案进行投票。

于 2013-08-09T16:05:46.637 回答
-1

这是演示

<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);
});
于 2013-08-09T16:00:32.780 回答