@mdui/jq/methods/val.js

拥有和 jQuery 相似 API 的轻量级 JavaScript 工具库

import { $ } from '../$.js';
import { map } from '../functions/map.js';
import { isElement, isFunction, isUndefined, toElement, eachArray, } from '../shared/helper.js';
import './each.js';
import './find.js';
import './is.js';
eachArray(['val', 'html', 'text'], (name, nameIndex) => {
    const props = ['value', 'innerHTML', 'textContent'];
    const propName = props[nameIndex];
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const get = ($elements) => {
        // text() 获取所有元素的文本
        if (nameIndex === 2) {
            return map($elements, (element) => {
                return toElement(element)[propName];
            }).join('');
        }
        // 空集合时，val() 和 html() 返回 undefined
        if (!$elements.length) {
            return undefined;
        }
        // val() 和 html() 仅获取第一个元素的内容
        const firstElement = $elements[0];
        const $firstElement = $(firstElement);
        // select multiple 返回数组
        if (nameIndex === 0 && $firstElement.is('select[multiple]')) {
            return map($firstElement.find('option:checked'), (element) => element.value);
        }
        // @ts-ignore
        return firstElement[propName];
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const set = (element, value) => {
        // text() 和 html() 赋值为 undefined，则保持原内容不变
        // val() 赋值为 undefined 则赋值为空
        if (isUndefined(value)) {
            if (nameIndex !== 0) {
                return;
            }
            value = '';
        }
        if (nameIndex === 1 && isElement(value)) {
            value = value.outerHTML;
        }
        // @ts-ignore
        element[propName] = value;
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    $.fn[name] = function (value) {
        // 获取值
        if (!arguments.length) {
            return get(this);
        }
        // 设置值
        return this.each((i, element) => {
            const $element = $(element);
            const computedValue = isFunction(value)
                ? value.call(element, i, get($element))
                : value;
            // value 是数组，则选中数组中的元素，反选不在数组中的元素
            if (nameIndex === 0 && Array.isArray(computedValue)) {
                // select[multiple]
                if ($element.is('select[multiple]')) {
                    map($element.find('option'), (option) => {
                        return (option.selected = computedValue.includes(option.value));
                    });
                }
                // 其他 checkbox, radio 等元素
                else {
                    element.checked = computedValue.includes(element.value);
                }
            }
            else {
                set(element, computedValue);
            }
        });
    };
});