javascript - 使用 Loop through array vaiable 在更改事件上触发 HTML

Question

我将一个数组变量从 PHP 传递给 JavaScript。我在 JavaScript 控制台中的变量内容是：

[
  {
    "function": "change",
    "parameter": "link",
    "err_msg": "It seems your input is not valid",
    "id": "element1"
  },
  {
    "function": "change",
    "parameter": "check",
    "err_msg": "please enter a valid input",
    "id": "element2"
  }
]

我想知道是否可以使用此变量在 element1 和 element2 元素的更改事件上触发 JavaScript/jquery？

我为此使用以下代码，但不起作用。

jQuery.each( passed_variable, function( key, element ) {
    jQuery( '#'  + element.id + '-source' ).on( element.function, function() {
        switch ( element.parameter ) {
            case 'link' :
                reg_match = new RegExp('^<.* rel=("|\').*("|\') .*href=("|\').*("|\').*>$');
                if ( ! reg_match.test(element.value) ) {
                    this.setCustomValidity( validation.err_msg );
                    this.reportValidity();
                } else {
                    this.setCustomValidity('');
                }
        }               
    });
});

标签： javascriptjquery

Answer 1

你可以使用.map(). 可以使用模板文字来获取 ID 。

let arr = [
  {
    "function": "change",
    "parameter": "link",
    "err_msg": "It seems your input is not valid",
    "id": "element1"
  },
  {
    "function": "change",
    "parameter": "check",
    "err_msg": "please enter a valid input",
    "id": "element2"
  }
];

arr.map((element) => {
  //console.log(element);
  let dom_element = document.getElementById(`${element.id}-source`);
  //console.log(dom_element);
  dom_element.addEventListener(element.function, function(e) {
    //console.log(e)
    switch ( element.parameter ) {
        case 'link' :
          console.log('link');
          reg_match = new RegExp('^<.* rel=("|\').*("|\') .*href=("|\').*("|\').*>$');
          if ( ! reg_match.test(element.value) ) {
            //this.setCustomValidity( validation.err_msg );
            //this.reportValidity();
          }else {
            //this.setCustomValidity('');
          }
          break;
        case 'check':
          console.log('check');
          break;
    }        
})
});

<input id="element1-source" type="text" placeholder="link">
<input id="element2-source" type="text" placeholder="check">