Переменная нарушает мой код

Question

Я пытаюсь создать собственный калькулятор для веб-сайта, который я разрабатываю. Я новый разработчик, и это немного над моей головой, но я пытаюсь учиться.

Я пытаюсь захватить 2 переменные и объединить их в 1, а затем использовать их для вызова div с другой страницы через ajax. Хорошо, что проблема заключается в том, что когда я добавляю код для объединения двух варов, он делает перерыв страницы, и я не уверен, почему.

 $(function(){ 
     $("input:radio[name=f_1]").click(function() { 
      var type = $(this).val(); 
     }); 
     $("input:radio[name=f_1a]").click(function() { 
      var prod = $(this).val(); 
     }); 

     var JobType = type + prod; 
    }); 

Вы можете видеть, что здесь живут: http://rdmproductions.com/dev/

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

Answer 1

Тип переменных и prod действительны только в пределах их относительных функций. Кроме того, события onclick запускаются только при нажатии элементов управления, что будет в какой-то момент в будущем после запуска вашего кода. Кажется, что код работает, когда страница отображается, поэтому у пользователя не будет возможности щелкнуть по кнопкам. Поэтому вам необходимо выполнить расчет в логическое время после того, как пользователь имеет возможность заполнить форму. Очевидные кандидаты будут представлены на странице или через другое событие, например, щелчок кнопкой мыши. Вам даже не нужно использовать OnClick событие из радиокнопок, вам просто нужно сцепить значения из радиоприемников, такие как ...

function onSubmit() { 
    var type = $("input:radio[name=f_1]").val(); 
    var type = $("input:radio[name=f_1a]").val(); 
    var jobType = type + prod; 
    // do something with jobType 
} 

Надеется, что это помогает

Answer 2

переменных type и prod - это локальные переменные, поэтому они недоступны вне функций обратного вызова обработчика щелчка.

Если вы хотите, чтобы они были доступны за пределами этих обработчиков кликов, вам необходимо объявить их на уровне более высокого уровня или сохранить их в каком-либо другом объекте, который остается постоянным за всю жизнь вашей функции обработчика кликов.

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

Вы могли бы принести данные по требованию, как это:

var JobType = $("input:radio[name=f_1]").val() + $("input:radio[name=f_1a]").val(); 

Вам даже не нужно будет обработчики нажать на две кнопки радио на всех.

---

EDIT на основе ваших самое последние комментариев:

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

$("input:radio[name=f_1], input:radio[name=f_1a]").change(function() { 
    var f1 = $("input:radio[name=f_1]:checked").val(); 
    var f1a = $("input:radio[name=f_1a]:checked").val(); 
    if (f1 && f1a) { 
     // both radio buttons have been selected, do something here 
     var jobType = f1 + f1a; 
     // do something with jobType here 
     alert(jobType); 
    } 
}); 

Вы можете увидеть его работы здесь: http://jsfiddle.net/jfriend00/FJcTA/

Answer 3

попробовать это:

$(function() { 

    $("input:radio[name^=f_1]").click(function() { 

     var total = 0;   

     $("input:radio[name^=f_1]").each(function() { 
      total += parseInt($(this).val()); 
     }); 

    }); 

}); 

Answer 4

$(function() { 
    var type, prod, jobType; 
    $("input:radio[name=f_1]").click(function() { 
     type = $(this).val(); 
    }); 
    $("input:radio[name=f_1a]").click(function() { 
     prod = $(this).val(); 
    }); 
    jobType = type + prod; 
});