サイドバー
プログラム言語:javascript_jquery:変数から動的に関数呼び出し
【ｊ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>
プログラム言語/javascript_jquery/変数から動的に関数呼び出し.txt · 最終更新: 2019/05/08 18:03 by yusuke_komori
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
コメント