티스토리 뷰
대신에 append()당신의 필요 사용 appendTo하여 복제 된 상자를 추가 할 수 있습니다.
appendTo와 append 사이에는 차이가 있습니다.
take this new thing and appendTo an already existing thing
vs
take already existing thing and append this new thing
그게 당신이 사용해야하는 이유 appendTo()
이제 추가 한 후 onClick event after appendTo statementdiv를 추가하는 대신에 다른 코드를 Also에 추가하십시오. div의 텍스트를 변경할 수 있습니다 cost. 나는 이것이 당신이 원하는 것이라고 생각합니다.
$(document).ready(function(){
$(".box_button").click(function(){
var box_content = $(this).parents('.box').clone(); //Box is cloned
var price = $(box_content).find(".box_price");
$(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price
$(box_content).appendTo('.container'); //Box is appended
var box_price = $(".sc_box_price");
var total = 0;
$(box_price).each(function(){
total += parseInt($(this).text());
});
$('.cost').text(total);
});
});.cost {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="box">
<div class="box_content">
<div class="box_price">180</div>
<div class="box_button">Click me</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">130</div>
<div class="box_button">Click me</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">270</div>
<div class="box_button">Click me</div>
</div>
</div>
</div>
<div class="container">
</div>
<div class="cost"></div>스 니펫 확장
당신의 append전화는 거꾸로입니다. 이 시도.
하지만 추가 된 "Click me"요소에는 click관련된 이벤트 가 없습니다 . 이것이 당신의 의도입니까?
또한, 나는 당신이 사용할 수 있습니다 생각 html에 전화를 $('.cost')대신 append.
$(document).ready(function(){
"use strict";
$(".box_button").click(function(){
var box_content = $(this).parents('.box').clone(); //Box is cloned
var price = $(box_content).find(".box_price");
$(price).toggleClass('box_price sc_box_price'); //Class changed to sc_box_price
// $(box_content).append('.container'); //Box is appended
$('.container').append(box_content); //Box is appended
calculate_price();
});
});
function calculate_price() {
var box_price = $(".sc_box_price");
var total = 0;
$(box_price).each(function(){
total += parseInt($(this).text());
});
$('.cost').html("<div class='cost'>"+total+"</div>"); // formerly: $('.cost').append
console.log(total);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="box">
<div class="box_content">
<div class="box_price">180</div>
<div class="box_button">Click me</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">130</div>
<div class="box_button">Click me</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">270</div>
<div class="box_button">Click me</div>
</div>
</div>
</div>
<div class="container">
</div>
<div class="cost"></div>스 니펫 확장
코드에 많은 오류가 있습니다. 아이디어는 무엇 이었습니까? 이 같은:
$(document).ready(function(){
"use strict";
$(".box_button").click(function(){
var box_content = $(this).parents('.box').clone();
var price = box_content.find(".box_price");
price.toggleClass('box_price sc_box_price');
$('.container').append(price);
//box_content.append('.container'); //Box is appended
var box_price = $(".sc_box_price");
var total = 0;
box_price.each(function(){
total += parseInt($(this).text());
});
$('.cost').html("Total:"+total);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="box">
<div class="box_content">
<div class="box_price">180</div>
<div class="box_button">Add to Cart</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">130</div>
<div class="box_button">Add to Cart</div>
</div>
</div>
<div class="box">
<div class="box_content">
<div class="box_price">270</div>
<div class="box_button">Add to Cart</div>
</div>
</div>
</div>
<div class="container">
</br>
Cart:
</div>
<div class="cost"></div>스 니펫 확장
출처
https://stackoverflow.com/questions/39917154