將每個部分中的兩個字段與jQuery或JavaScript相乘

Question

這是我的代碼：

 $('#hitung').click(function() { var count = $('.item').length; var locality = 'id-ID'; var luas = $('.tinggi' + count).val() * $('#lebar' + count).val(); console.log(luas); var dayasebar = luas / 12.5 * 2; var hasil = dayasebar / 2.5; var harga = Math.ceil(hasil) * 120000; var title = $('#title-temp').text(); var color = document.querySelector('input[name="color"]:checked').value; var color_title = document.querySelector('input[name="color"]:checked ~ label h4').innerHTML; $('#luas').html('<p>Luas: ' + luas + ' meter &#178;</p>'); $('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>'); $('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>'); $('.panel-footer').css('display', 'block'); }); $('#tambah').click(function() { var count = $('.item').length; var id = 'Item[' + count + ']'; var item = $('.item:first').clone(); // item.find('input:first').attr('id', id); item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count); item.find('#title:first').attr('for', id) .html('Dinding ' + (1 + count)); item.appendTo('#fieldset'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="fieldset"> <div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;"> <div class="panel-body"> <h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3> <form> <div class="row text-left"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label> <input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label> <input type="text" id="lebar1" name="lebar" class="form-control new-input"> </div> </div> <div class="col-md-12"> <div class="form-group"> <label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label> <div class="row"> <div class="col-md-12"> <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;"> <div id="color-group1"> <input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" /> <label for="color1" style="display: block;"> <span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;"> <h4>Warna 1</h4> </span> </label> </div> </div> <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;"> <div id="color-group2"> <input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" /> <label for="color2" style="display: block;"> <span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;"> <h4>Warna 2</h4> </span> </label> </div> </div> <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;"> <div id="color-group3"> <input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" /> <label for="color3" style="display: block;"> <span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;"> <h4>Warna 3</h4> </span> </label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </form> </div> <div class="panel-footer quite-white-tip bg-pink text-white" style="display: none"> <h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="media"> <div class="row"> <div class="col-md-5"> <div class="media-left media-middle"> <a href="#"> <img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="..."> </a> </div> </div> <div class="col-md-7"> <div class="media-body text-left"> <div id="color" style="display: block; clear: both; width: 100%;"></div><br> <div id="luas"></div> <div id="hasil"></div> <div id="title-temp" style="display: none;">Warna</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br> <button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button> <br><br> 

當我按COUNT按鈕時，代碼工作正常，所有結果都很好地放置在我希望顯示的位置。 但是我仍然缺少一項功能，追加項目類。 當我追加，添加或克隆項目類時，由於每個輸入的ID或名稱相同，因此計算無法正常工作。 我嘗試使用[]作為輸入，但仍然不知道如何計數並將每個結果都像原始元素一樣放置。

Answer 1

 $('#hitung').click(function() { var count = $('.item').length; var locality = 'id-ID'; var luas = $('#tinggi' + count).val() * $('#lebar' + count).val(); var dayasebar = luas / 12.5 * 2; var hasil = dayasebar / 2.5; var harga = Math.ceil(hasil) * 120000; var title = $('#title-temp').text(); var color = $('input[name=color]').css('backgroundColor'); var color_title =$('input[name=color] ~ label h4').text(); $('#luas').html('<p>Luas: ' + luas + ' meter &#178;</p>'); $('#hasil').html('<p>' + Math.ceil(hasil) + ' Kaleng ' + Math.ceil(hasil) * 5 + ' Kg | Rp ' + harga.toLocaleString(locality, {}) + '</p>'); $('#color').html('<div class="row"><div class="col-xs-6 col-md-4" style="height: 50px; float: left; background-color: ' + color + '; display: block;text-align: center;"></div><div class="col-xs-6 col-md-8"><h4 style="text-transform: capitalize; font-weight: bold; margin-top:0">' + title + '</h4><p>' + color_title + '</p></div></div>'); $('.panel-footer').css('display', 'block'); }); $('#tambah').click(function() { var count = $('.item').length; var id = 'Item[' + count + ']'; var item = $('.item:first').clone(); // item.find('input:first').attr('id', id); item.find('.tinggi' + count + ':first').attr('id', 'tinggi' + count); item.find('#title:first').attr('for', id) .html('Dinding ' + (1 + count)); item.appendTo('#fieldset'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="fieldset"> <div class="panel panel-default item" style="background-color: #f2f2f2;border-radius: 0;border: 0;"> <div class="panel-body"> <h3 id="title" style="text-transform: uppercase; font-weight: bold; text-decoration: underline; margin-bottom: 25px" class="text-center">Dinding 1</h3> <form> <div class="row text-left"> <div class="col-md-10 col-md-offset-1"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label style="font-style: italic; font-weight: normal; font-size: 20px">Tinggi</label> <input type="text" id="tinggi1" name="tinggi" class="form-control new-input tinggi"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label style="font-style: italic; font-weight: normal; font-size: 20px">Lebar</label> <input type="text" id="lebar1" name="lebar" class="form-control new-input"> </div> </div> <div class="col-md-12"> <div class="form-group"> <label style="font-style: italic; font-weight: normal; font-size: 20px">Pilih Warna</label> <div class="row"> <div class="col-md-12"> <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;"> <div id="color-group1"> <input type="radio" name="color" id="color1" class="input-hidden" value="blue" data-name="Hello" style="visibility:hidden; display: none;" /> <label for="color1" style="display: block;"> <span style="width: 100%; background-color: blue; display: block;text-align: center;padding: 50px 0;"> <h4>Warna 1</h4> </span> </label> </div> </div> <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;"> <div id="color-group2"> <input type="radio" name="color" id="color2" class="input-hidden" value="lightblue" style="visibility:hidden; display: none;" /> <label for="color2" style="display: block;"> <span style="width: 100%; background-color: lightblue; display: block;text-align: center;padding: 50px 0;"> <h4>Warna 2</h4> </span> </label> </div> </div> <div class="col-md-4" style="background-color: #fff;padding-top: 15px;padding-bottom: 12px;"> <div id="color-group3"> <input type="radio" name="color" id="color3" class="input-hidden" value="brown" style="visibility:hidden; display: none;" /> <label for="color3" style="display: block;"> <span style="width: 100%; background-color: brown; display: block;text-align: center;padding: 50px 0;"> <h4>Warna 3</h4> </span> </label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </form> </div> <div class="panel-footer quite-white-tip bg-pink text-white" style="display: none"> <h3 style="text-transform: uppercase; text-decoration: underline; font-weight: 600">Kebutuhan Cat Anda</h3><br> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="media"> <div class="row"> <div class="col-md-5"> <div class="media-left media-middle"> <a href="#"> <img class="media-object img-responsive" src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="..."> </a> </div> </div> <div class="col-md-7"> <div class="media-body text-left"> <div id="color" style="display: block; clear: both; width: 100%;"></div><br> <div id="luas"></div> <div id="hasil"></div> <div id="title-temp" style="display: none;">Warna</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <button type="button" id="tambah" class="btn btn-sm btn-link">Add</button><br> <button type="button" id="hitung" class="btn btn-lg btn-success">COUNT</button> <br><br>