jQuery如何存储append（）或clone（）的元素

Question

我做了一个非常简单的扩展盒。 结构如下

<div class="container"> 
    <div class="item"> </div>  
    <div class="outside"> </div>  <!-- append '.item''s children to '.outside'  -->
    <div class="item"> </div>
    <div class="item"> </div> 
</div>

我想要实现的是，如果打开一个框，则在单击另一个框时可以立即查看内容。 （不需要再次slideUp和slideDown ）

我遇到的问题是，如果单击第一个框box 1 ，则可以正确看到滑块，然后单击box 2 ，内容也可以正确显示，然后单击box 1 ，内容将会赢不显示。 我知道append所有.inside子项append到'.outside'内容只能被查看一次，因为append将元素移到.outside ，如果我使用clone() ，则可以查看内容，但是会丢失工作滑块。

所以我的问题是，我是否需要.inside子项附加到'.outside'之后，然后再将所有内容移回原位置？ 如果有人可以帮忙吗？ 谢谢！

在线样本http://jsfiddle.net/ny4sx/

这是我的html

<div class="container">
    <div class="item">1
        <div class="inside">
            <ul class="slider">
                <li>
                    <img src="http://lorempixel.com/580/250/nature/1" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/2" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/3" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/4" />
                </li>
            </ul>
        </div>
    </div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

jQuery的

var $outside = $('<div class="outside"></div>');
var $closebutton = $('<div class="close">x</div>');
$outside.append($closebutton);


$('.item').click(function (event) {
    event.preventDefault();
    var $this = $(this);
    $this.toggleClass('active');


    if ($this.hasClass('active')) {
        $('.active').removeClass('active');
        $this.addClass("active");
    }
    if $this.next().hasClass('outside')) {
    console.log('yes');
} else {
    console.log('no');
    $outside.insertAfter(this).css({
        'height': 300
    }).slideDown();

}

$('.close').click(function () {
    $('.outside').remove();
    $('.active').removeClass('active');

});

});

//Slider FROM Here

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides() {
    return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(

function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time);

    if (slides().length == $i + 1) $i = -1; // loop to start

    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
},
$transition_time + $time_between_slides);

Answer 1

您可以考虑这样的事情还是与您的期望有太大不同？

HTML：

<div class="container">
    <div class="item" data-content="1">1</div>
    <div class="item" data-content="2">2</div>
    <div class="item" data-content="3">3</div>
    <div class="outside">
        <div class="close">x</div>
        <div class='content content1'>
            <ul class="slider">
                <li>
                    <img src="http://lorempixel.com/580/250/nature/1" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/2" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/3" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/4" />
                </li>
            </ul>
        </div>
        <div class='content content2'>
            <h1>this is item 2</h1>
        </div>
        <div class='content content3'>
            <h1>this is item 3</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aliquam, dolorum ipsa perferendis iure quibusdam consequuntur nulla reiciendis velit aut modi reprehenderit. Sit, mollitia, natus odio repellat neque error voluptatem.</p>            
        </div>
    </div>    
</div>

JS：

$('.item').click(function(event) {
    var $this = $(this);
    var contentNumber = $this.data("content");

    $('.active').removeClass('active');
    $this.addClass("active");

    $('.content').hide();
    $('.content'+contentNumber).show();
    $('.outside').slideDown();     
});

$('.close').click(function(){
    $('.outside').slideUp();
    $('.active').removeClass('active');
});

小提琴

Answer 2

我在这里玩了一点：

http://jsfiddle.net/ny4sx/37/

我的编辑摘要：

    var savedContent = $('.outside .content').children();
    var target = $('.outside').prev().children().first();
    console.dir(target);
    $('.outside .content').remove();
    target.append(savedContent);

不是最干净的（我做了很多试验和错误），但是我弄清楚了问题所在。 您在保存对内容的引用之前已将其删除，因此该内容不持久。 不过，我绝对会按照MamaWalkter的建议去做。