Question

这是我的标记：

<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>

所以我使用以下代码克隆并将jQuery中的一些.box div从.main添加到.container：

$(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
    });
});

在追加之前，我将子元素.box_price的类更改为.sc_box_price。

我有另一个代码，它应该计算所有.sc_box_price的总和并将其附加到.cost。

$(document).ready(function(){
"use strict";

    var box_price = $(".sc_box_price");
    var total = 0;

    $(box_price).each(function(){
        total += parseInt($(this).text());
    });
    $('.cost').prepend("<div class='cost'>"+total+"</div>");
    console.log(total);
});

出于某种原因，我无法定位.sc_box_price。也许是因为.sc_box_price实际上没有添加到DOM中？我该如何解决这个问题？

Answer 1

而不是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 statement中，而不是每次都附加div而只需更改cost div的文本。我想这就是你想要的。

＆＃13;

$(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);
          
          });
    
    
});

＆＃13;

.cost {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

您的append来电是倒退的。试试这个。

但请注意，附加的＆＃34;点击我＆＃34;元素将没有与它们相关联的click个事件。这是你的意图吗？

此外，我认为您可能希望在html上使用$('.cost')来代替append。

＆＃13;

$(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);
}

＆＃13;

<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>

＆＃13;

Answer 3

您的代码中有许多错误。这个想法是什么？像这样：

＆＃13;

$(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);
    });
});

＆＃13;

<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>

＆＃13;

如何在DOM中定位克隆元素（jQuery）

3 个答案: