1

我正在尝试制作一个简单的程序来输入一些数字（默认为 2 个字段，单击链接时添加更多字段），并且我已经足够远可以添加更多字段，但是似乎我无法获得他们的输入。我的想法是，这是因为它们是仅由 JS 添加的 innerHTML，而不是实际上在文件中。

有什么想法可以修复吗？

JSFiddle：http: //jsfiddle.net/tmaDr/

index.php的馅饼：http: //pastie.org/7460786

simplemath.jquery.js 的馅饼：http: //pastie.org/7460788

代码而不是馅饼：

索引.php

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>SimpleMath</title>
    <link rel='stylesheet' type='text/css' href='css/style.css' />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src='scripts/simplemath.jquery.js' type='text/javascript'></script>
</head>
<body>
    <h1>Simple Math</h1>

    <div class='labelcontainer'>
        <label for='type'>Type of Problem:</label>
        <select name='type' id='problemType'>
            <option value='add'>Add</option>
            <option value='subtract'>Subtract</option>
            <option value='multiply'>Multiply</option>
            <option value='divide'>Divide</option>
        </select><br /><br />
        <label for='problem'>Enter first number: </label>
        <input type='text' name='fieldOne' id='fieldOne' /><br /><br />
        <label for='problem'>Enter next number: </label>
        <input type='text' name='fieldNext' id='fieldNext' /><br /><br />
        <span class='smalltext'><a href="#" id='nextField'>(Click for another field)</a></span>
        <br /><br />
        <input type='submit' name='submit' id='submit' />
    </div>
    <label>Answer:</label><br /><br />
    <h3 id="answer"></h3>
</body>
</html>

简单数学.jquery.js

//some global vars
var i = 1;
var x = 0;
var extraFieldVals = [];
var extraFieldCount = 0;

//code

$(document).ready(function() {
    $('#submit').click(function() {
            var typeofproblem = $('#problemType').val().toString().toLowerCase();
            switch(typeofproblem) {
                case 'add':
                    $('#answer').text( $(extraFieldVals[0]).val() );
                    return addF();
                //case 'subtract':
                    //return addF();
                //case 'multiply':
                    //return multF();
                //case 'divide':
                    //return divF();
                //default:
                    //return unF();
            }
    });

    $('#nextField').click(function() {
        var id='#fieldNext'+i;
        extraFieldVals.push(id);
        $('<label for='+id+'>Enter next number: </label><input type=\'text\' name='+id+' id='+id+'\' /><br /><br />').insertBefore('#nextField');
        i+=1;
    });

    var extraFields = function() {
        for (x; x < i; x++) {
            extraFieldCount = x;
        }
    }

    var addF = function() {
    };
});
4

3 回答 3

0

好吧，我对你的脚本做了一些调整，试试这个：

var i = 1;
var x = 0;
var extraFieldVals = [];
var extraFieldCount = 0;
$(window).load(function(){

//code

$(document).ready(function() {
    extraFieldVals.push("#fieldOne");
    extraFieldVals.push("#fieldNext");
    $('#submit').click(function() {
            var typeofproblem = $('#problemType').val().toString().toLowerCase();
            switch(typeofproblem) {
                case 'add':
                    $('#answer').text( $(extraFieldVals[0]).val() );
                    return addF();
                //case 'subtract':
                    //return addF();
                //case 'multiply':
                    //return multF();
                //case 'divide':
                    //return divF();
                //default:
                    //return unF();
            }
    });

    $('#nextField').click(function() {
        var id='fieldNext'+i;
        extraFieldVals.push("#"+id);
        $('<label for='+id+'>Enter next number: </label><input type=\'text\' name=\''+id+'\' id=\''+id+'\' /><br /><br />').insertBefore('#nextField');
        i+=1;
    });

    var extraFields = function() {
        for (x; x < i; x++) {
            extraFieldCount = x;
        }
    }

    var addF = function() {
    };
});
});
于 2013-04-12T05:16:05.513 回答
0

试试这个

//some global vars
 var i = 1;
 var x = 0;
 var extraFieldVals = [];
 var extraFieldCount = 0;

//code

$(document).ready(function() {
$('#submit').click(function() {
        var typeofproblem = $('#problemType').val().toString().toLowerCase();
        switch(typeofproblem) {
            case 'add':
               var values = [];
               $("input[type='text']").each(function() {
                   var value = $(this).val();
                   if(value !== ""){
                       values.push(parseInt(value));
                   }

                });
                console.log(addF(values)); //change according to your requirement
            //case 'subtract':
                //return addF();
            //case 'multiply':
                //return multF();
            //case 'divide':
                //return divF();
            //default:
                //return unF();
        }
});

$('#nextField').click(function() {
    var id='#fieldNext'+i;
    extraFieldVals.push(id);
    $('<label for='+id+'>Enter next number: </label><input type=\'text\' name='+id+' id='+id+'\' /><br /><br />').insertBefore('#nextField');
    i+=1;
});

var extraFields = function() {
    for (x; x < i; x++) {
        extraFieldCount = x;
    }
}

var addF = function(values) {
    var result = 0;

    values.forEach(function(value,item){
        result += value;
    });
    return result;
};
});

小提琴演示

于 2013-04-12T05:23:44.897 回答
0

好吧，我使用类添加了一个更简单的编码解决方案。

这是一个小提琴：http: //jsfiddle.net/tmaDr/8/

 <input type='text' name='fieldOne' id='fieldOne' class="input_value"/><br /><br />

此处添加的 Class 用于循环使用 each() 循环输入的值。

于 2013-04-12T05:24:13.340 回答