如何调整 JavaScript 中的字符串输出并给出序列

Question

我需要帮助，我正在使用 Javascript 代码来检测无线电、文本输入和文本区域字段，并将检测到的值从字段推送到输入字段中的序列。 我为每个字段指定了一个带有序列、name1、name2、name3、name4、name5、name6、name7、name8、name8、name10 和 name11 的 id，并且推送字符串的字段 id 是 sc_tgenerator_form_field_prompt_text。 我有一些代码，想知道是否可以调整在 sc_tgenerator_form_field_prompt_text

中推送的最终字符串的顺序

我已经尝试过这段代码，并且它有效。它按顺序显示无线电值，但它显示字符串最后的所有文本输入和文本区域。 其不正确的序列正确的序列是名称 1、2、4、5、9 是单选，名称 3、6、7 8 是文本框，10 和 11 是文本区域 这是代码

// Select all radio buttons from the nine forms
const radios = document.querySelectorAll('input[type="radio"]');

// Select the input field where you want to display the generated string
const inputField = document.querySelector('.sc_tgenerator_form_field_inner input[type="text"]');

// Store text input values separately
let textInputValues = {};

// Function to update the input field based on selected radio options
var defaultTextGlobal;
var counter = 0;

function updateInputField() {
    if (counter == 0) {
        defaultTextGlobal = jQuery('.sc_tgenerator_form_field_prompt_text').val() + ',';
    }

    let selectedOptions = [];
    radios.forEach(radio => {
        if (radio.checked) {
            selectedOptions.push(radio.value);
        }
    });

    // Include text input values in the selected options
    Object.keys(textInputValues).forEach(key => {
        if (textInputValues[key].trim() !== '') {
            selectedOptions.push(textInputValues[key].trim());
        }
    });

    counter = counter + 1;
    inputField.value = defaultTextGlobal + ' ' + generateString(selectedOptions);
}

// Generate the string with the desired format
function generateString(options) {
    if (options.length === 0) {
        return '';
    }
    let result = options[0] + ' of ';
    if (options.length > 1) {
        result += options.slice(1).join(', ');
    }
    result = result.replace('Do not include of ', '');
    result = result.replace('Do not include', '');
    result = result.replace('Do not include of,', '');
    result = result.replace('Do not include,', '');

    return result;
}

// Add event listeners to all radio buttons to listen for changes
radios.forEach(radio => {
    radio.addEventListener('change', updateInputField);
});

// jQuery for text inputs and text areas
jQuery(document).ready(function ($) {
    // Select text inputs and text areas and add input event listener
    $('#form-field-name3, #form-field-name6, #form-field-name7, #form-field-name8, #form-field-name10, #form-field-name11').on('input', function () {
        textInputValues[this.id] = $(this).val(); // Store text input values
        updateInputField(); // Update the input field
    });
});

Answer 1

如果我理解正确，您希望生成的值字符串与数字序列匹配？现在，您正在循环遍历并按类型（无线电，然后文本，然后文本区域）添加每个输入值，因此它们在

selectedOptions

数组中遵循该顺序。

您可以将所有输入父元素存储在一起，而不是按类型存储字段。循环遍历每个元素，检查输入的类型，以在每次迭代中将值添加到

selectedOptions

。

所以这可能看起来像（未经测试）...

const AllFieldsInOrder = document.querySelectorAll('.form_field'); // example

function updateInputField() {
    if (counter == 0) {
        defaultTextGlobal = jQuery('.sc_tgenerator_form_field_prompt_text').val() + ',';
    }

    let selectedOptions = [];

    // Just check for field type right in the loop
    allFieldsInOrder.forEach(key => {

        if(allFieldsInOrder[key].querySelector('input[type="radio"]:checked')) {
            selectedOptions.push(allFieldsInOrder[key].querySelector('input[type="radio"]:checked').value);
        }

        if(allFieldsInOrder[key].querySelector('input[type="text"]')) {
            selectedOptions.push(allFieldsInOrder[key].querySelector('input[type="text"]').value);
        }

        if(allFieldsInOrder[key].querySelector('textarea')) {
            selectedOptions.push(allFieldsInOrder[key].querySelector('textarea').value);
        }

    });

    counter = counter + 1;
    inputField.value = defaultTextGlobal + ' ' + generateString(selectedOptions);
}