如何从多个控件调用 JS 函数

How to invoke a JS function from several controls

本文关键字：调用 JS 函数 控件      更新时间：2023-09-26

我在一个表中有几个控件，ID 和函数在表的每一行中生成，如下所示：

<select id="data_01" onclick="open_details_01()">...
<select id="data_02" onclick="open_details_02()">...
<select id="data_03" onclick="open_details_03()">...

我只需要一个函数，例如：

function open_details_ + *index* ()
{
}

当函数的名称始终以"data_"开头时

您可以通过以下两种方式之一执行此操作：

  1. 使用 eval ： 'eval（ functionName + num + "（）;" ）
  2. 您可以将函数作为对象的一部分，然后将其作为成员调用：myObject[ functionName + num ]()

要执行第二个：

    var obj = {
      open_details_01: function()
      {
        alert( "1" );
      },
      open_details_02: function()
      {
        alert( "2" );
      },
      open_details_03: function()
      {
        alert( "3" );
      }
    };
    var num = "01";
    obj[ "open_details_" + num ]();
    num = "02";
    obj[ "open_details_" + num ]();
    num = "03";
    obj[ "open_details_" + num ]();

第二种方式的小提琴：https://jsfiddle.net/69Lk5baa/

如果select控件的结构总是有 id 序列data_01, data_02 ..，则可以使用 jquery startsWith选择器：

$('[id^=data_]').on("change",function()
{
  alert(this.id);
});

例 ： https://jsfiddle.net/DinoMyte/zwv9h4c9/2/

假设您使用的是 jquery，则可以使用属性 start with selector 方法来附加事件。

https://api.jquery.com/attribute-starts-with-selector/

$(document).on('click', "button[id^='data_']", function(){
    alert('clicked');
})

https://jsfiddle.net/usav3dor/

相关文章：