Question

我想从其他HTML元素克隆图像和文本，但它不起作用。我已经尝试过append()函数，之前它可以正常工作，但它会从原始源元素中删除内容。我认为问题在于存储在变量中的对象。

$(function () {

    // GLOBALS AND VARS
    var $device = $('.device'),
        $device__screen = $('.device__screen'),
        $text__area = $('.text-area'),
        $controls__left = $('.controls__left'),
        $controls__right = $('.controls__right'),
        $stack = $('.stack'),
        $stack__item = $('.stack > .stack__item'),
        $copy__img = $(),
        $copy__text = $(),
        item__count = $stack__item.length - 1,
        current__item = 0,
        animation = false;


    // function to verify if current item isn't last

    function check__current__item () {
        if (current__item < item__count) {
            current__item++;
        } else {
            current__item = 0;
        }
    }

    // function load assets to variables
    // children 0 is img
    // children 1 is text
    function load__assets () {
        $copy__img = $stack__item[current__item].children[0].outerHTML;
        $copy__img.clone().appendTo('$device__screen');

        $copy__text = $stack__item[current__item].children[1].innerHTML;
        $copy__text.clone().appendTo('$text__area');
        
        check__current__item();

    }

    load__assets();

    $controls__right.on('click', function (e) {
        e.preventDefault();
        load__assets();
    })


});

.stack {
    display: none;
}
.device {
    background: url(https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_05-512.png) no-repeat;
    width: 512px;
    height: 512px;
    display: inline-block;
}
.device__screen {
    margin: 200px 0 0 200px;
    width: 194px;
    height: 310px;
    float: left;
}
.controls__left,
.controls__right {
    width: 128px;
    height: 128px;
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-128.png) no-repeat;
    float: left;
}
.controls__right {
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-128.png) no-repeat;
    margin-left: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="app__wrapper" class="row">
    <div class="grid-g__col_7 text_centered">
        <div class="device">
            <div class="device__screen">

            </div>
        </div>
    </div>
    <div class="grid-g__col_5">
        <div class="text-area">

        </div>
        <div class="controls">
            <a href="#" class="controls__right"></a>
        </div>
    </div>
</div>

<div class="stack">
    <div class="stack__item">
        <img src="https://cdn1.iconfinder.com/data/icons/logo-s-icon-pack-collection/512/whatsup-128.png" alt="">
        <div class="text_content">
            <h3>1. Sed ut perspiciatis iste natus error siT</h3>
            <p>accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>
    </div>
    <div class="stack__item">
        <img src="https://cdn1.iconfinder.com/data/icons/logo-s-icon-pack-collection/783/twitter-128.png" alt="">
        <div class="text_content">
            <h3>2. Sed ut perspiciatis iste natus error siT</h3>
            <p>accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>
    </div>
    <div class="stack__item">
        <img src="https://cdn1.iconfinder.com/data/icons/logo-s-icon-pack-collection/777/vkontakte-128.png" alt="">
        <div class="text_content">
            <h3>3. Sed ut perspiciatis iste natus error siT</h3>
            <p>accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis</p>
        </div>
    </div>
</div>

Answer 1

.clone()是一个jQuery方法，你需要一个jQuery对象来使用它。

//Here outerHTML will return string content
$copy__img = $stack__item[current__item].children[0].outerHTML;

//Convert string to jQuery object and use the clone function
//Use correct variable with  appendTo
$($copy__img).clone().appendTo($device__screen);

Answer 2

添加到Satpal的答案在string内不是 appendTo ，而是变量引用您的元素，不应在引号中提及。

$($copy__img).clone().appendTo($device__screen); //no quotes
..
$($copy__text).clone().appendTo($text__area);//no quotes

<强> DEMO

jQuery - clone（）函数不起作用

2 个答案: