javascript - 来自添加类的 jQuery 调用函数调用另一个函数

Question

我正在使用多选插件创建要选择的商品和服务列表。用户将从列表中选择他们想要的服务，并且由于有很多服务，所以他们是分组的。所以动态创建的内容看起来像

<ul class="ms-optgroup">
  <li class="ms-optgroup-label"><span>Class 41</span></li>
  <li class="ms-elem-selectable"><span>Item 1</span></li>
  <li class="ms-elem-selectable"><span>Item 2</span></li>
  <li class="ms-elem-selectable"><span>Item 3</span></li>
  <li class="ms-elem-selectable"><span>Item 4</span></li>
</ul>

当用户点击一个项目时，它将转到右侧的相邻列表，一切正常。然后，它会为每点击一次的总价格增加 350 美元。但我想创造一种情况，无论添加多少项目，它只增加 350 美元一次。

所以我试着这样做，当你点击一个项目时，它会像往常一样添加 350 美元，然后将一个类添加到 ms-optgroup。

$(function () {
  addClass(350);
  addService(0);
});

function update() {
    var total = 0;
      $('.ms-selectable .ms-list .ms-optgroup:not(.added) .ms-elem-selectable input[type=hidden], .ms-selectable .ms-list .ms-optgroup.added .ms-elem-selectable input[type=hidden]').each(function () {
        total += +$(this).val();
      });

  $('#variablePrice').text(total);
}

function addClass(value) {
    const elem = $(".ms-selectable .ms-list .ms- optgroup:not(.added) .ms-elem-selectable");
    elem.on('click', function () {
        $(this).parent().addClass('added');
        $(this).append($('<input>').attr('type', 'hidden').val(value));

        update();
      });
}

<ul class="ms-optgroup added">

所以一切正常，但是当我为 ms-optgroup.added 类中的特定项目调用新函数时，它只返回相同的 $350 函数“addClass”

这是我的第二个函数，当一个项目已经被添加时。

function addService(value) {
    const elem = $(".ms-selectable .ms-list .ms-optgroup.added .ms-elem-selectable");

  elem.on('click', function () {
    $(this).append($('<input>').attr('type', 'hidden').val(value));

    update();
  });
}

所以在我的脑海中，一旦第一个项目被选中并增加了 350 美元，并且 ms-optgroup 已经“添加”了类，之后调用的函数应该只为每次点击增加 0 美元的值。

我希望这是有道理的，这是我所知道的一个非常具体的问题。已经尝试了一段时间才能做到这一点。

感谢您的帮助。

这是一个 fiddle 来展示https://jsfiddle.net/uL67gqpc/所以有两个组作为例子，理论上你会从一个组中添加一个项目，它会增加每组 350 美元，无论添加多少项目。因此，为什么我尝试添加 .added 类以防止进一步计算。但我可能离题太远了。

Answer 1

我会使用复选框，将价格存储到 data-* 属性中并使用 Array.reduce() 来计算 :checked 一个人的值(value)观

let price = 350; // Or whatever
const $service = $('[name="service[]"]');

const calcTotal = () => {
  const price_services = [...$service.filter(':checked').get()]
    .reduce((v, el) => (v += +el.dataset.value, v), 0);
  const result = price_services ? price_services + price : 0;
  $('#total').text(`${result}$`)
}

$service.on('change', calcTotal).trigger('change');

*{box-sizing: border-box; margin:0;}
label {display: block;}

<h6>ONE</h6>
<label><input type="checkbox" name="service[]" value='a' data-value="10"> a 10$</label>
<label><input type="checkbox" name="service[]" value='b' data-value="15"> b 15$</label>
<label><input type="checkbox" name="service[]" value='c' data-value="8"> c 8$</label>
<h6>TWO</h6>
<label><input type="checkbox" name="service[]" value='d' data-value="120"> d 120$</label>
<label><input type="checkbox" name="service[]" value='e' data-value="100"> e 100$</label>
<label><input type="checkbox" name="service[]" value='f' data-value="7"> f 7$</label>
<label><input type="checkbox" name="service[]" value='g' data-value="4"> g 4$</label>
<label><input type="checkbox" name="service[]" value='h' data-value="2"> h 2$</label>
<label><input type="checkbox" name="service[]" value='i' data-value="64"> i 64$</label>
<label><input type="checkbox" name="service[]" value='j' data-value="33"> j 33$</label>
<h6>TOTAL:</h6>
<span id="total"></span>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>