时间戳

首页 > 解决方案 > 使用函数参数作为变量调用

javascript - 使用函数参数作为变量调用

问题描述

标题中已经描述了什么，但基本上我想发送一个函数外围并用它来调用三个不同变量之一。同样，理解代码的“$（'#'+id）”部分也不会错过，我所需要的只是“id =”部分的正确语法（如果可能的话）。而且我知道有一种解决方法，但我正在尝试最小化代码，这似乎是最优化的解决方案。

我的代码：

<div class="one">
    <p>ime:</p>
    <input type="text" id="name">
    <p>kraj:</p>
    <input type="text" id="city">
    <p>starost:</p>
    <input type="text" id="age">
    <p id="one_output"></p>
</div>

var name = "1";
var city = "2";
var age = "3";

function statement(id) {
    id = $('#'+id+'').val();
    $("#one_output").text("Sem " + name + " in živim v " + city + ". Star sem " + age);
};

$('.one input[type="text"]').keyup(function() {
    switch($(this).attr("id")) {
        case "name":
            statement(the_id);
            break;
        case "city":
            statement(the_id);
            break;
        case "age":
            statement(the_id);
            break;
    }
});

标签： javascriptjquery

解决方案

好吧，我想我终于明白你在追求什么了

因此，您要传递一个变量名并希望动态调用它，而不是global使用this，我建议您将所有变量都放在一个全局变量中，例如

var formInputs = { name: '1', city: '2', age: '3' }

然后你可以很容易地读/写它们formInputs[ var_name_here ]

所以你的例子，会写成

var formInputs = { name: '1', city: '2', age: '3' }

function statement(name, val) {
    formInputs[name] = val
    var txt = `Sem ${formInputs.name} in živim v ${formInputs.city}. Star sem ${formInputs.age}`
    $("#one_output").text(txt)
}

$('.one input[type="text"]').keyup(function() {
    var elm = $(this)
    statement(elm.attr("id"), elm.val())
})


var formInputs = { name: '...', city: '...', age: '...' }

var statement = function(name, val) {
    formInputs[name] = val // assign value to variable
    var txt = `Sem <b>${formInputs.name}</b> in živim v <b>${formInputs.city}</b>. Star sem <b>${formInputs.age}</b>` // the new text
    $("#one_output").html(txt) // output
}

$('.one input[type="text"]').keyup(function() {
    var elm = $(this) // our key element
    statement(elm.attr("id"), elm.val()) // pass id and why not the value, so we dont need the element again
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
    <p>ime: <input type="text" id="name"></p>
    <p>kraj: <input type="text" id="city"></p>
    <p>starost: <input type="text" id="age"></p>
    <p id="one_output"></p>
</div>

推荐阅读