Внутренние/внешние JS не работают с Drupal, но отлично работают в статическом HTML/jsfiddle

Question

Внутренние/внешние JS не работают с Drupal, но отлично работают в статическом HTML/jsfiddle

Продолжение отсюда Примененный JS к теме Drupal работает неправильно, но он отлично работает за пределами Drupal

Рабочий JSFiddle: http://jsfiddle.net/tbq8eo8b/10 / (он вычисляет общее количество, в Drupal он вычисляет нули - почему?)

Необработанный:

$(document).ready(function () {
    var $selects = $("select").change(function (e) {
        var total = 0;
        $selects.each(function() {
            var val = this.value.match(/\$(\d+)/);
            total += val ? +val[1] : 0;
        });
        $(".total").val(total);
    });
});

Друпал:

(function ($) {
Drupal.behaviors.totalAmount = {
attach: function(context, settings) {

/*Add your js code here */
    var $selects = $("select").change(function (e) {
        var total = 0;
        $selects.each(function() {
            var val = this.value.match(/\$(\d+)/);
            total += val ? +val[1] : 0;
        });
        $(".total").val(total);
    });
}
};
})(jQuery);

2-я попытка с внутренним Drupal:

  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script>
  $(document).ready(function () {
    var $selects = $("select").change(function (e) {
        var total = 0;
        $selects.each(function() {
            var val = this.value.match(/^\$(\d+)$/);
            total += val ? +val[1] : 0;
        });
        $(".total").val(total);
    });
});
  </script>

Как вы видите, код идентичен (за исключением оболочек Drupal), так почему он не работает на Drupal? Почему он печатает нули в поле .total, но в JSFiddle это работает нормально?

2

javascript theming 7

Author: Optimus Prime, 2014-09-24

Source

1 answers

score 4 · Accepted Answer

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

(function ($) {
Drupal.behaviors.totalAmount = {
attach: function(context, settings) {

    /*Add your js code here */
    var selects = $("select").change(function (e) {
        var total = 0;
        selects.each(function() {
          var val = $("#"+this.id+"  option[value='"+this.value+"']").text().match(/\$(\d+)/);
          total += val ? +val[1] : 0;
        });
        $(".total").val(total);
    });
}
};
})(jQuery);

Вот как это выглядит в работе:

enter image description here

Вот как настраиваются параметры первого выбора в качестве компонента веб-формы

enter image description here

Чтобы получить цены, нужно было бы изменить строку регулярного выражения на

var val = $("#"+this.id+" option[value='"+this.value+"']").text().match(/\$(\d+(\.\d{2})?)/);

Работает пример:

enter image description here

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

$(".total").val(total.toFixed(2));

Чтобы скрипт также работал с разделителем тысяч, измените скрипт на

(function ($) {
Drupal.behaviors.totalAmount = {
attach: function(context, settings) {

/*Add your js code here */
    var selects = $("select").change(function (e) {
        var total = 0;
        selects.each(function() {
                var val = $("#"+this.id+" option[value='"+this.value+"']").text().match(/\$(\d{1,3}(,\d{3})*(\.\d{2})?)/);
                        total += val ? +parseFloat(val[1].replace(/,/g,'')) : 0;
        });
        $(".total").val('$'+total.toFixed(2));
    });
}
};
})(jQuery);

enter image description here