【ｊQuery】変数から動的に関数呼び出し

関数を動的に呼び出すには、オブジェクトのプロパティに関数を代入します。
以下は、変更した input 要素によって、実行する関数を切り替える例。

<html>
<meta>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</meta>
<body>
<form>
    <p>a <input type="number" name="a"></p>
    <p>b <input type="number" name="b"></p>
    <p>c <input type="number" name="c"></p>
    <p>d <input type="number" name="d"></p>
</form>
<p>a + b = <input type="text" name="ab" readonry></p>
<p>b + c = <input type="text" name="bc" readonry></p>
<p>c + d = <input type="text" name="cd" readonry></p>
<p>a + d = <input type="text" name="ad" readonry></p>
<script>
$(function() {
  // オブジェクトのプロパティに関数を代入
  let funcObj = {
    // a の時に実行する関数
    a: function(inputData) {
      let ab = inputData['a'] + inputData['b']
      let ad = inputData['a'] + inputData['d']
      $('input[name=ab]').val(ab)
      $('input[name=ad]').val(ad)
    },
    // b の時に実行する関数
    b: function(inputData) {
      let ab = inputData['a'] + inputData['b']
      let bc = inputData['b'] + inputData['c']
      $('input[name=ab]').val(ab)
      $('input[name=bc]').val(bc)
    },
    // c の時に実行する関数
    c: function(inputData) {
      let bc = inputData['b'] + inputData['c']
      let cd = inputData['c'] + inputData['d']
      $('input[name=bc]').val(bc)
      $('input[name=cd]').val(cd)
    },
    // d の時に実行する関数
    d: function(inputData) {
      let cd = inputData['c'] + inputData['d']
      let ad = inputData['a'] + inputData['d']
      $('input[name=cd]').val(cd)
      $('input[name=ad]').val(ad)
    },
  }
 
  $('input[type=number]').on('change', function(){
    let change_name = $(this).attr('name')
    let inputData = {}
    $('input[type=number]').each(function(i){
      let val = $(this).val()
      if (val == '') {
        val = 0
      }
      let name = $(this).attr('name')
      inputData[name] = val|0  // 数値に型変換
    })
 
    // 変更した input 要素の name に対応した関数を実行する
    if (funcObj[change_name] != null) {
      funcObj[change_name](inputData)
    }
  })
})
</script>
</body>
</html>

ゆーものメモ帳

−サイドバー

【ｊQuery】変数から動的に関数呼び出し

コメント

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

−サイドバー

【ｊQuery】変数から動的に関数呼び出し

コメント

ページ用ツール