Question

我一直试图让这项工作在过去几天没有任何成功。我有一个由自由职业者开发的价格计算器功能，这个功能在过去的几周内无法访问。

此函数在没有任何JavaScript选项卡的情况下工作正常，但不是很正确。我需要在页面上有标签，因为这个计算器有很多选项。

这是jQuery函数。

$(document).ready(function() {

  // For tabs
  var tabContents = $(".tab_content").hide(),
  tabs = $("ul.nav-tabs li");
  tabs.first().addClass("active").show();
  tabContents.first().show();
  tabs.click(function() {
    var $this = $(this),
    activeTab = $this.find('a').attr('href');
    if (!$this.hasClass('active')) {
      $this.addClass('active').siblings().removeClass('active');
      tabContents.hide().filter(activeTab).fadeIn();
    }
    return false;
  });

  // For Calculator
  function Cost_Calculator() {

    var Currency = '$';
    var messageHTML = 'Please contact us for a price.';

    function CostFilter(e) {
      return e;
    }

    //Calculate function
    function calculate() {

      //Blank!
      var CalSaveInfo = [];
      $('#cost_calc_custom-data, #cost_calc_breakdown').html('');

      //Calculate total
      var calCost = 0;
      var calculate_class = '.cost_calc_calculate';
      $('.cost_calc_active').each(function() {

        //Calculation
        calCost = calCost + parseFloat($(this).data('value'));

        //Add to list
        var optionName = $(this).attr('value');
        var appendName = '<span class="cost_calc_breakdown_item">' + optionName + '</span>';

        var optionCost = $(this).attr('data-value');
        var appendCost = '<span class="cost_calc_breakdown_price">' + Currency + optionCost + '</span>';

        if (optionCost != "0") {
          var appendItem = '<li>' + appendName + appendCost + '</li>';
        }

        //hidden data
        var appendPush = ' d1 ' + optionName + ' d2 d3 ' + optionCost + ' d4 ';

        $('#cost_calc_breakdown').append(appendItem);

        CalSaveInfo.push(appendPush);

      });

      //Limit to 2 decimal places
      calCost = calCost.toFixed(2);

      //Hook on the cost
      calCost = CostFilter(calCost);

      var CustomData = '#cost_calc_custom-data';
      $.each(CalSaveInfo, function(i, v) {
        $(CustomData).append(v);
      });

      //Update price
      if (isNaN(calCost)) {
        $('#cost_calc_total_cost').html(messageHTML);
        $('.addons-box').hide();
      } else {
        $('#cost_calc_total_cost').html(Currency + calCost);
        $('.addons-box').show();
      }

    }

    //Calculate on click
    $('.cost_calc_calculate').click(function() {

      if ($(this).hasClass('single')) {
        //Add cost_calc_active class
        var row = $(this).data('row');
        //Add class to this only
        $('.cost_calc_calculate').filter(function() {
          return $(this).data('row') == row;
        }).removeClass('cost_calc_active');
        $(this).addClass('cost_calc_active');
      } else {
        // Remove class if clicked
        if ($(this).hasClass('cost_calc_active')) {
          $(this).removeClass('cost_calc_active');
        } else {
          $(this).addClass('cost_calc_active');
        }
      }

      //Select item
      var selectItem = $(this).data('select');
      var currentItem = $('.cost_calc_calculate[data-id="' + selectItem + '"]');
      var currentRow = currentItem.data('row');

      if (selectItem !== undefined) {
        if (!$('.cost_calc_calculate[data-row="' + currentRow + '"]').hasClass('cost_calc_active'))
          currentItem.addClass('cost_calc_active');
      }

      //Bring in totals & information
      $('#cost_calc_breakdown_container, #cost_calc_clear_calculation').fadeIn();
      $('.cost_calc_hide').hide();
      $('.cost_calc_calculate').each(function() {
        if ($(this).is(':hidden')) {
          $(this).removeClass('cost_calc_active');
        }
        calculate();
      });

      return true;
    });

    $('#cost_calc_clear_calculation').click(function() {
      $('.cost_calc_active').removeClass('cost_calc_active');
      calculate();
      $('#cost_calc_breakdown').html('<p id="empty-breakdown">Nothing selected</p>');
      return true;
    });
  }

  //Run cost calculator
  Cost_Calculator();

});

您可以在jsfiddle without tabs上看到这一点。我可以从多个部分中选择选项，订单框将动态更新所选期权的价格和详细信息。

但是当我添加JavaScript标签时，它会停止正常工作。 See here。现在，如果我从不同的部分选择选项，则订单框会重置之前的选择并仅显示新的选项。

我认为问题在于某处的计算器。

Answer 1

您正在从隐藏元素中删除active类。这意味着当您移动到第二个标签时，您将忽略您在第一个标签中所做的事情。

你小提琴中的第120行：

if ($(this).is(':hidden')) {
      $(this).removeClass('cost_calc_active');
    }

我还没有足够深入地了解您是否可以删除此代码。

jQuery价格计算器功能不适用于标签

1 个答案: