Question

晚上好，我在用Javascript构建表单时遇到问题。为了避免重复代码，我想使用相同的功能：

.container {
    padding-left: 15em;
 }

我在循环内调用函数

<head>
    <meta charset="utf-8">
    <!-- Check Compattibility with Pure CSS -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Check Compattibility with Pure CSS -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Check Compattibility with Pure CSS -->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  -->
    <title>Home</title>
    <style>
    body {
        background-color: black;
        color: white;
    }

    .pure-menu {
        width: 10em;
        height: 100vh;
        position: fixed;
        z-index: 9;
        bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        background: #191818;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container {
        padding-left: 15em;
    }
    </style>
</head>

<body>
    <div class="pure-menu custom-restricted-width">
        <!-- <a href="#" class="pure-menu-link pure-menu-heading">Home</a> -->
        <span class="pure-menu-heading">My Site</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="newuser/register" class="pure-menu-link">Register</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="pure-u-24-24">
            <img src="/static/images/Logo.png" class="pure-img" />
            <h1>Welcome Home</h1>
            <br>
            <br>
            <br>
            <p>Please continue to check back for updates!</p>
            <br>
            <br>
            <p>More comming soon...</p>
        </div>
    </div>
</body>

</html>

我知道function addCheckBoxItem(p, name, value) { // add checkbox var newCheckbox = document.createElement("input"); newCheckbox.type = "checkbox"; newCheckbox.setAttribute("value", p); newCheckbox.setAttribute("id", p); newCheckbox.setAttribute("name", name); newCheckbox.onchange = function(){ var cbs = document.getElementsByName(name); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = false; } this.checked = true; // define the peer selected as choice value = this.value; // TODO: MY PROBLEM IS HERE }; form.appendChild(newCheckbox); // add label to checkbox var label = document.createElement('label'); label.setAttribute("name", name); label.htmlFor = p; label.appendChild(document.createTextNode(p)); form.appendChild(label); // add br tag to checkbox var br = document.createElement("br") br.setAttribute("name", name); form.appendChild(br); }是不可能的，因为for (i = 0; i < array.length; i++) { addCheckBoxItem(array[i].key, nameItemCheckbox, peer_choice); }事件是异步的，但是我想检索此事件的值并将其与我的参数关联。我对这个问题有不同的反应。其中之一是：Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference我已经理解了基本概念，但是没有一个示例与我的问题有关。有人可以帮我吗？

编辑-解决方案

由于@Tibrogargan，我以这种方式修改了我的功能：

value = this.value

和

onchange

Answer 1

像这样将回调传递到addCheckBoxItem

// accumulator
var data = {}
// callback
var storeData = (name, value, p) => data[name] = value;
// callback as third argument
addCheckBoxItem('data1', 'checkbox1', storeData);
addCheckBoxItem('data2', 'checkbox2', storeData);
addCheckBoxItem('data3', 'checkbox3', storeData);

在此处http://jsfiddle.net/gtqnc109/9/

查看完整示例

Javascript-将参数函数传递给异步onchange事件

1 个答案: