Question

我有一些由jquery生成的div。里面显示价格，标题和选定的选项值。

我已经尝试了很多东西来隐藏每个div类＆＃34;结果＆＃34;如果没有选择，但没有运气。

有没有办法隐藏每个div而不重写整个代码？

JS：

function pcc_calc_forms() {
  jQuery(".calcolare").each(function (e) {
    var t = jQuery(this).attr("id");

    var n = pcc_form_data(t);
   jQuery("#" + t + "-mostra").html('<h3 class="pcc-total">Totale : ' + n[0] + "" + "€" + '</h3><div class="content">' + n[1] + '<br /><br /></div>')
  })
}

function pcc_form_data(e) {
  var t = new Array(0, "");
  var n = new Array;
  var r = new Array;

  $("#" + e + " select").each(function (e) {
    var title = $(this).attr("data-title");
    var inside = $(this).find("option:selected").attr("data-title");
    var i = $(this).find("option:selected").html();

    if (inside === undefined) {
      inside = " ( " + i + " ) "
    } else {
      inside = " ( " + inside + " ) "
    }

    var i = $(this).find("option:selected").attr("data-price");
    var s = parseFloat($(this).attr("data-mult"));

    if (isNaN(s)) {
      s = 1
    }
    var o = parseFloat($(this).find("option:selected").text());
    if (isNaN(o)) {
      o = 0
    }

    if (i !== undefined) {
      if (i == "this") {
        i = o
      } else {
        i = parseFloat(i)
      }

      t[0] = t[0] + parseFloat(i) * s;

      if (s == 1) {
        t[1] = t[1] + "<div class=\"result\"><b>" + title + "" + inside + "</b> : " + parseFloat(i) + "" + " € " + "</div>"
      } else {
        t[1] = t[1] + "<div class=\"result\"><b>" + title + "" + inside + "</b> : " + parseFloat(i) + " X " + s + " = " + parseFloat(i) * s + "" + " € " + "</div>"
      }
    }
  });

  n = [];
  r = [];

  return t
}

$(document).ready(function () {
  pcc_calc_forms();

  $(document).on("change", ".calcolare select", function () {
    pcc_calc_forms()

  });
});

THIS是小提琴的链接

提前感谢任何提示。

Answer 1

$(document).on("change", ".calcolare select", function () {
  var i = $(this).find('option:selected').index();  
  alert(i);
  //if(i>0) ppc_calc_forms();
  //else $('.results').hide();
})

这将找到所选选项的索引... as you can see，它可以正常工作，而不是您的功能......

我会尽可能简化该脚本..

Answer 2

我理解不想在此时重写代码。但是，为了比较，这是我按照你的一般模式进行的方式：

function pcc_calc_forms() {
    jQuery(".calcolare").each(function (e) {
        var t = jQuery(this).attr("id");

        var items = pcc_item_data(t);

        var totalPrice = $.makeArray(items).reduce(function(total,item,i,a) {
            return total+item.price;
        },0);

        text = '<h3 class="pcc-total">Totale : ' + totalPrice + "" + "€" + '</h3>';
        text += '</h3><div class="content">';

        items.each(function(i,item) {
            if (item.mult > 1)
                text += "<div class=\"result\"><b>" + item.title + " ( " + item.name + " )</b> : " + item.price + " X " + item.mult + " = " + item.price * item.mult + "" + " € " + "</div>";
            else
                text += "<div class=\"result\"><b>" + item.title + " ( " + item.name + " )</b> : " + item.price + "" + " € " + "</div>";
        });

        text += '<br /><br /></div>';

        jQuery("#" + t + "-mostra").html(text);
    });
}

function pcc_item_data(e) {
    return $("#" + e + " select").map(function (e) {
        if (this.selectedIndex > 0) {
            var item = {};
            item.title = $(this).attr("data-title");
            var inside = $(this).find("option:selected").attr("data-title");
            var i = $(this).find("option:selected").html();
            item.name = inside ? inside : i;
            item.price = parseFloat($(this).find("option:selected").attr("data-price"));
            var mult = parseFloat($(this).attr("data-mult"));
            item.mult = isNaN(mult) ? 1 : mult;
            return item;
        }
    });
}

$(document).ready(function () {
    pcc_calc_forms();

    $(document).on("change", ".calcolare select", function () {
            pcc_calc_forms();
    });
});

我做了什么：

从数据表示中分离数据收集（pcc_item_data）; 这使代码更易读，以后更容易维护。
使用map（http://api.jquery.com/jQuery.map/）和reduce（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce）来转换/聚合数组;他们很简洁一旦你熟悉它们就表达出来。

根据选择选项隐藏/显示动态生成的div

2 个答案: