Member 12792306 Ответов: 1

Jquery: вычисление & amp; переменная не отображается, когда установлен флажок


Все еще изучаю JQuery. На самом деле он все еще новичок в JQuery. Попытка кодировать-это:

Когда флажок an items установлен, он вычисляет плату за обслуживание раз в годы. затем добавьте к нему лицензионный сбор. Наконец, он берет общее количество и умножает его на количество, которое затем создает item_cost.

Если проверено более одного элемента, он также вычислит item_cost и добавит стоимость каждого проверенного элемента, создавая total_item_cost. И он добавит тренировочные часы каждого проверенного элемента, создавая total_training_hours.

После того, как элемент будет выполнен расчет, он будет отображать название элемента, годы, количество, часы обучения и общую стоимость каждого элемента, который проверяется в нижней части таблицы. Он также отобразит другую таблицу с общим количеством учебных часов и общей стоимостью всех предметов.

Я закодировал ниже, но, похоже, не могу заставить элементы отображаться в таблице.

<script>
							
									
$(document).ready(function(){
	
	//hide tables until box is checked
            $('#add_item_here').hide();
            $('#add_totals_here').hide();		
	
        //First obtaining indexes for each checkbox that is checked
        $('input[id^=item_add]').change(function(){

            // get checkbox index
            var index = $(this).attr('id').replace('item_add','');

            //hide tables until box is checked
           //$('table[id=add_item_here]').hide();
            //$('table[id=add_totals_here]').hide();

            //If checkbox is checked, show tables, calculate item cost, get variables, calculate total cost, & calculate total training hours
            //$('input:checkbox').change(function(){ 

                //If check box is check do...
                if($(this).is(':checked')){

                    // Show totals tables
                    $('#add_item_here').show();
                    $('#add_totals_here').show();

                    // start at 0 for item_cost
                    var item_cost = 0;
                    var total_cost = 0;
                    $('input:checkbox:checked').each(function(){

                        // Calculating item cost for just that one checkbox
                        item_cost+=parseInt($('#servicefee'+index).val());
                        item_cost*=parseInt($('#yrs'+index).val()); 
                        item_cost+=parseInt($('#licensefee'+index).val());
                        item_cost*=parseInt($('#qty'+index).val()); 

                        // Get hidden variables to use for calculation and tables.
                        var item = $('#item'+index).val();
                        var traininghrs = parseInt($('#traininghrs'+index).val());
                        var qty = parseInt($('#qty'+index).val());
                        var yrs = parseInt($('#yrs'+index).val());
                    });

                    // start at 0 for total_costs
                    var total_cost = item_cost;
                    //Add item_cost with other item_costs to calculate total_cost
                    $('input:checkbox:checked').each(function(){
                        total_cost+= item_cost;
                    });

                    // start at 0 for total training hours
                    var total_training = 0;
                    //Add trianing hours with other training hours to calculate total_training
                    $('input:checkbox:checked').each(function(){
                        total_training+=parseInt($('#traininghrs'+index).val());
                    });
                }

                    //Display each item that is checked into a table
                    $('#add_item_here > tbody:last-child').append('' + item +'' + yrs +'' + qty +'' + traininghrs + ''+ item_cost + '');

                    //Display totals into table row into a table
                    $('#add_totals_here > tbody:last-child').append('' + total_training + ''+ total_cost + '');

            //});                                         

            // Quantity change, if someone changes the quantity
            $('#qty'+index).change(function(){
                $('input:checkbox').trigger('change');
            });

            // Years change, if someone changes the years           
            $('#yrs'+index).change(function(){
                $('input:checkbox').trigger('change');
            });                                         
        });           
    });
</script>


<center>
										



<table id="add_item_here" style="width: 98%">											<tbody>												<tr><td>Item</td><td>Years</td><td>Quantity</td><td>Training Hours</td><td>Total Item Cost</td></tr>												</tbody>										</table>
									</center>
									<center>
										



<table id="add_totals_here" style="width: 98%">											<tbody>												<tr><td></td><td>Total Cost</td></tr>												</tbody>										</table>
									</center>


Что я уже пробовал:

фиксированной итерации.
обновлено приложение. Все еще ищу ответы

ZurdoDev

Итак, в чем именно заключается Ваш вопрос?

1 Ответов

Рейтинг:
1

Patrice T

В вашем браузере есть отладчик для JS, используйте его с точкой останова, чтобы увидеть, когда ваш код запускается и что он делает, выполняя шаг за шагом.

Вы должны научиться использовать отладчик как можно скорее. Вместо того чтобы гадать, что делает ваш код, пришло время увидеть, как он выполняется, и убедиться, что он делает то, что вы ожидаете.

Отладчик позволяет вам следить за выполнением строка за строкой, проверять переменные, и вы увидите, что есть точка, в которой он перестает делать то, что вы ожидаете.
Отладчик-Википедия, свободная энциклопедия[^]
Освоение отладки в Visual Studio 2010 - руководство для начинающих[^]

Отладчик здесь для того, чтобы показать вам, что делает ваш код, и ваша задача-сравнить его с тем, что он должен делать.