将复选框值传递给函数

Question

我正在尝试从 .js 中获取所有选定复选框和单选按钮的值，并通过单击按钮将其传递给 .jsx 函数。 .jsx 函数包含 10 个函数。

我想要实现的是我将数组中的字符串作为函数调用。喜欢

[value1, value2, value3....] 到 值1（）；价值2（）； value3();

这是我在 .js 和 .jsx 中的代码：

//---------------------This is the .js part-----------------------------  

$("#button").on('click', function () {
        var csInterface = new CSInterface();
        var selected = new Array();
    
        $("input[type=checkbox]:checked").each(function () {
            selected.push(this.value);
        });
    
        $("input[type=radio]:checked").each(function () {
            selected.push(this.value);
        });
    
        if (selected.length > 0) {
            csInterface.evalScript("secondFunction(" + selected + ")");
        }   
    });

   //---------------------This is the .jsx part----------------------------- 
    
    function secondFunction(selected){
       
    //the functions below in this function have to be executed one after another
    
      function value1{...};
      function value2{...};
      function value3{...};
    };

Answer 1

不确定这是否是正确的做法，但据我了解，您希望能够根据其参数（数组）从“secondFunction”调用某个函数。

我想你可以通过将函数处理程序创建为 javascript 对象来做到这一点，如下所示：

编辑：我编辑了代码，使其看起来更像您提供的内容，因此您更容易理解。 我也替换了 isArray 检查方法。

const secondFunction = (selectedArray) => {
    // So that function works if we provide a string instead of an array
    selectedArray = Array.isArray(selectedArray) ? selectedArray : [selectedArray];

    // Object containing all your functions with function name as key
    const functionsHandler = {
        opt1 : () => {
            console.log('opt1');
        },
        opt2 : () => {
            console.log('opt2');
        },
        opt3 : () => {
            console.log('opt3');
        },
        opt4 : () => {
            console.log('opt4');
        },
        opt5 : () => {
            console.log('opt5');
        }
    };

    selectedArray.forEach((selectedItem) => {
        // Check if the function we want is defined in our object
        if(functionsHandler.hasOwnProperty(selectedItem))
            functionsHandler[selectedItem]();
    })
}


$("#button").on('click', function () {
    // var csInterface = new CSInterface();
    var selected = new Array();

    $("input[type=checkbox]:checked").each(function () {
        selected.push(this.id);
    });

    $("input[type=radio]:checked").each(function () {
        selected.push(this.id);
    });

    if (selected.length > 0) {
        // csInterface.evalScript("secondFunction(" + selected + ")");
        secondFunction(selected);
    }   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="opt1" name="opt1" class="options" />
<label for="opt1">opt1</label>

<input type="checkbox" id="opt2" name="opt2" class="options" />
<label for="opt2">opt2</label>

<input type="checkbox" id="opt3" name="opt3" class="options" />
<label for="opt3">opt3</label>

<input type="checkbox" id="opt4" name="opt4" class="options" />
<label for="opt4">opt4</label>

<input type="checkbox" id="opt5" name="opt5" class="options" />
<label for="opt5">opt5</label>

<button id="button">Click me</button>