Question

我有这张桌子：

<table id="fla_inf" width="100%">
<tr>
<th class="tab_header" colspan="6">Flavors and Additives</th>
</tr>
<tr>
    <th class="tab_header_nam">Flavor Brand</th>
    <th class="tab_header_nam">Flavor Name</th>
    <th class="tab_header_nam">Dropper type</th>
    <th class="tab_header_nam">Quantity Unit</th>
    <th class="tab_header_nam">Quantity</th>
    <th class="tab_header_nam">Add/Remove row</th>
</tr>
<tbody>
<tr>
    <td><select id="marque.0" class="marque"></select></td>
    <td><select id="arome.0" class="arome"></select></td>
    <td><select id="dropper.0" class="dropper">
            <option selected="selected" value="type1">type 1</option>
            <option value="type2">type 2-3</option></td>
    <td>
        <select id="qtyunit.0" class="qtyunit">
            <option value="ml">ml</option>
            <option value="drops">drops</option>
            <option selected="selected" value="perc">%</option>
        </select>
    </td>
    <td><input id="quantity.0" class="quantity" type="number"/></td>
    <td><input class="addline" type="image" src="http://spitilab.com/wp-content/uploads/2015/01/add.png"><input class="remline" type="image" src="http://spitilab.com/wp-content/uploads/2015/01/delete.png"></td>
</tr>
</tbody>
</table>

我有这段代码：

$(document).on('click', '#calc_btn', function() {

    //set variables
    var $totflav =0;

    //set variable to store content from flavors
    var $content_fla = '<table id="res_fla"><tr><th colspan="5">Falvors and additives</th></tr>';
    $content_fla += '<table id="res_fla"><tr><th>Falvors Brand</th><th>Falvors Name</th><th>Quantity (ml)</th><th>Quantity (drops)</th><th>Flavor %</th></tr>';

    //get quantity of all flavors
    $('#fla_inf > tbody > tr:gt(2)').each(function(i) {
        //i++;

        //set the id of elements
        var $brandid = "marque."+i;
        var $aromeid = "arome."+i;
        var $dropid = "dropper."+i;
        var $unitid = "qtyunit."+i;
        var $qtyid = "quantity."+i;

        //set variables for drops and ml
        var $dropsqty = 0;
        var $mlqty = 0;

        //test if quantity is set 
        if ($("#"+$qtyid).val()) {

            //calculate qty in ml
            if ($("#"+$unitid).text() == "%")  {
                $mlqty = parseFloat($("#total_vol").val()) * parseFloat($("#"+$qtyid).val());
            }
            else if ($("#"+$unitid).text() == "ml") {
                $mlqty = parseFloat($("#"+qtyid).val());
            }
            else  {
                if (("#"+$dropid).text() == "type 1") {
                    $mlqty = parseFloat($("#"+qtyid).val())/30;
                } 
                else {
                    $mlqty = parseFloat($("#"+qtyid).val())/20;
                }
            }

            //calculate qty in drops
            if (("#"+$dropid).text() == "type 1") {
                $dropsqty =  parseFloat($mlqty*30);
            } 
            else {
                $dropsqty =  parseFloat($mlqty*20);
            }

            var $pctfla = parseFloat($("#total_vol").val()) * $mlqty

        }   

        //Add flavor to content
        $content_fla += '<tr>';
        $content_fla += '<td>' + $("#"+$brandid).val() +'</td>';
        $content_fla += '<td>' + $("#"+$aromeid).val() +'</td>';
        $content_fla += '<td>' + $mlqty;
        $content_fla += '<td>' + $dropsqty;
        $content_fla += '<td>' + $pctfla;
        $content_fla += '</tr>';

        $totflav = $totflav + $mlqty;

        $i = $i +1;

    });

当我点击Calculate按钮时，$（＆＃34;＃＆＃34; + $ qtyid）.val（）未定义。我不明白为什么。通常它应该有一个值，我已经看过连接器名称是否正确并且看起来没问题。

由于

Answer 1

你需要喜欢 $（“[id ='quantity.0']”）

当id包含时，您需要使用attribute selector。（点）字符，

由于。（点）表示class selector

EX）

$（“＃quantity.0”）表示id = quantity，class = 0，如下所示

<input id="quantity" class="0"/>

$（“[id ='quantity.0']”）表示id = quantity.0发现如下

<input id="quantity.0"/>

My Fiddle

JQuery - 动态元素的值未定义

1 个答案: