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的值加上。

我希望这是有道理的，这是我所知道的一个非常具体的问题。尝试了一段时间以解决这个问题。

谢谢您的帮助。

这里是显示https://jsfiddle.net/uL67gqpc/的小提琴，因此有两个组作为示例，理论上，您将添加一个组中的一个项目，并且无论添加多少个项目，每个组都将增加$ 350。因此，为什么我尝试添加.added类以防止进一步计算。但是我可能会离开。

Answer 1

我会使用复选框，将价格存储到import React, { useState, useEffect } from 'react'; import { makeStyles } from "@material-ui/core/styles"; import GridItem from "components/Grid/GridItem.js"; import GridContainer from "components/Grid/GridContainer.js"; import Card from "components/Card/Card.js"; import CardHeader from "components/Card/CardHeader.js"; import CardBody from "components/Card/CardBody.js"; import Input from "components/UI/Input/Input"; import Button from "components/CustomButtons/Button.js"; import styles from "styles/styles"; import falconAPI from "falcon-api"; const useStyles = makeStyles(styles); export default function AddWarehouse(props) { const classes = useStyles(); // State management hooks const [form, setForm] = useState({ warehouseType: { elementType: 'select', elementConfig: { options: [ { value: '4', displayValue: 'Showroom' } ] }, value: '1', validation: {}, valid: true }, territory: { elementType: 'select', elementConfig: { options: [ { value: '1', displayValue: 'Kandy' }, { value: '2', displayValue: 'Jaffna' }, { value: '3', displayValue: 'Colombo' }, { value: '4', displayValue: 'Galle' } ] }, value: '1', validation: {}, valid: true }, name: { elementType: 'input', elementConfig: { type: 'text', placeholder: 'Name' }, value: '', validation: { required: true }, valid: false, touched: false }, address: { elementType: 'input', elementConfig: { type: 'text', placeholder: 'Address' }, value: '', validation: { required: true }, valid: false, touched: false }, telephone: { elementType: 'input', elementConfig: { type: 'text', placeholder: 'Telephone' }, value: '', validation: { required: true, }, valid: false, touched: false }, }); // Life cycle hooks useEffect(() => { falconAPI.post('/warehouse/type/all') .then(response => { const warehouseTypes = response.data.message; const updatedWarehouseTypes = [] warehouseTypes.map(warehouseType => { updatedWarehouseTypes.push({ value: warehouseType.id, displayValue: warehouseType.name }); }) const updatedForm = { ...form }; updatedForm.warehouseType.options = updatedWarehouseTypes; setForm(updatedForm); }) .catch(error => { }); }, []); const inputChangedHandler = (e) => { } const submitFormHandler = (e) => { console.log(form); } const formElementsArray = []; for (let key in form){ formElementsArray.push({ id: key, config: form[key] }) } return ( <GridContainer> <GridItem xs={12} sm={12} md={12}> <Card> <CardHeader color="success"> <h4 className={classes.cardTitleWhite}>{props.title}</h4> </CardHeader> <CardBody> {formElementsArray.map(formElement => ( <Input key={formElement.id} elementType={formElement.config.elementType} elementConfig={formElement.config.elementConfig} value={formElement.config.value} invalid={!formElement.config.valid} shouldValidate={formElement.config.validation} touched={formElement.config.touched} changed={(event) => inputChangedHandler(event, formElement.id)} /> ))} <Button onClick={submitFormHandler}>Add Model</Button> </CardBody> </Card> </GridItem> </GridContainer> ); }属性中，然后使用data-*计算Array.reduce()的值

:checked

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;}

jQuery从添加的类调用函数来调用另一个函数

1 个答案: