1

いくつかの数値を入力する簡単なプログラムを作成しようとしています (デフォルトでは 2 つのフィールド、リンクをクリックするとさらに追加されます)。さらに多くのフィールドを追加するのに十分な距離に達しましたが、それらを取得できないようです。入力。私の考えでは、これは、実際にはファイルではなく、JS によってのみ追加された innerHTML であるためです。

どうすれば修復できますか？

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

index.php の貼り付け: http://pastie.org/7460786

simplemath.jquery.js の貼り付け: http://pastie.org/7460788

ニプレスの代わりのコード:

index.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>

simplemath.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

これを試してください

//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

スクリプトにいくつかの調整を加えました。これを試してください。

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

クラスを使用して、より単純なコーディング ソリューションを追加しました。

ここにフィドルがあります： http://jsfiddle.net/tmaDr/8/

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

ここで追加されたクラスは、each() ループを使用して入力された値をループ処理するために使用されます。

于 2013-04-12T05:24:13.340 に答える