jQuery - clone() 函数不起作用
jQuery - clone() function doesn't work
我想从另一个 HTML 元素克隆图像和文本,但它不起作用。我已经尝试过 append()
函数,它工作正常,但它从原始源中删除了内容 element.I 认为问题出在变量中存储的对象。
$(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>
.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);
添加到 Satpal 的答案 它不是 string
在 appendTo
中而是 variable 引用了您的元素,不应在 quotes 中提及。
$($copy__img).clone().appendTo($device__screen); //no quotes
..
$($copy__text).clone().appendTo($text__area);//no quotes
我想从另一个 HTML 元素克隆图像和文本,但它不起作用。我已经尝试过 append()
函数,它工作正常,但它从原始源中删除了内容 element.I 认为问题出在变量中存储的对象。
$(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>
.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);
添加到 Satpal 的答案 它不是 string
在 appendTo
中而是 variable 引用了您的元素,不应在 quotes 中提及。
$($copy__img).clone().appendTo($device__screen); //no quotes
..
$($copy__text).clone().appendTo($text__area);//no quotes