JavaScript无法解析为Number

时间：2016-08-05 10:09:34

标签： javascript arrays parsing

我正在尝试根据我在FORM AREA上的搜索条件进行总更改。但是，由于某种原因，它不会将字符串解析为数组，并且总数未正确显示，最后会有类似e + 88的内容。完全是新手。

$('.btn-primary').click(function() {
    var month = $('#inputMonth').val(); // get option value for month
    if (month == 'none') month = '';
    var year = $('#inputYear').val(); // get option value for year
    if (year == 'none') year = '';
    var arr = [];
    var totalPrice = 0;
    var price;
    
    // problematic part
    $('figure.col-sm-3').has('tr:last-child>td:last-child:contains(' + year + ')').has('tr:last-child>td:last-child:contains(' + month + ')').each(function () {
        arr.push($('tr.price td:nth-child(even)').text()); // adds each element to array 'arr'
        price = $('tr.price td:nth-child(even)').text();
        totalPrice += Number(price); // parse into an Integer then do the adding
        document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP."; // problematic part.
    });
    
    // this snippet works fine
    $('figure.col-sm-3')
        .hide() // hide all of them, and then show if both `has` are true
        .has('tr:last-child>td:last-child:contains(' + year + ')')
        .has('tr:last-child>td:last-child:contains(' + month + ')')
        .show();
        
    return false; // to avoid that button submits the form
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">
    <div class="row">
    <!-- FORM AREA -->
        <p id="displayTotal"></p> <!-- display the total here -->
        <p>Show items by:</p>
        <form class="form-horizontal">
            <div class="form-group">
            <label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputMonth">
                        <option value="none"> - </option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputYear" class="col-sm-2 control-label">Select Year</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputYear">
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary">Show results</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="container">
    <div class="row"> <!-- FIRST SET OF ITEMS -->
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 1</h6>
            <img src="img1.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>November 7, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 2</h6>
            <img src="img2.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>December 2, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 3</h6>
            <img src="img3.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>L</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 4</h6>
            <img src="img4.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>XL</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
    </div>
</section>

5 个答案:

答案 0 :(得分：2)

问题在于您正在访问该类的所有元素，而不是那些作用于迭代中当前元素的元素。因此，你一次又一次地重复价格。我修改了代码并删除了混合的香草javascript来保持统一。我还将总价格文本的设置移到了循环之外，以便不必要地一次又一次地设置它。代码：

$('figure.col-sm-3').has('tr:last-child>td:last-child:contains(' + year + ')').has('tr:last-child>td:last-child:contains(' + month + ')').each(function(index, self) {
            var price = $(self).find("tr.price td:nth-child(even)").eq(0).text()
        arr.push(price);
        totalPrice += parseFloat( price );
    });
    $("#displayTotal").html("Total amount is currently at <b>" + totalPrice + "</b> PHP.");

答案 1 :(得分：1)

从问题部分到问题部分的结尾，请尝试以下方法：

// Comment in JavaScript are prefixed by //
$('figure.col-sm-3').each(function(e) {
    var soldOn = e.children('tr').last().children('td').last().val();

    if ($soldOn.indexOf(year) >= 0 && $soldOn.indexOf(month)) {
        var price = e.children('tr.price').first().children('td').last().val();

        arr.push(price); // Adds each element to array 'arr'
        totalPrice += price;

        document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP.";
    }
});

答案 2 :(得分：1)

您必须遍历元素而不是解析元素数组的文本值。

$('.btn-primary').click(function() {
    var month = $('#inputMonth').val(); // get option value for month
    if (month == 'none') month = '';
    var year = $('#inputYear').val(); // get option value for year
    if (year == 'none') year = '';
    var arr = [];
    var totalPrice = 0.00;
    var price;
    
    // problematic part
document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP.";

    $('figure.col-sm-3').has('tr:last-child>td:last-child:contains(' + year + ')').has('tr:last-child>td:last-child:contains(' + month + ')').each(function (_index, element) {
$(element).find('tr.price td:nth-child(even)').each(function(_i, element){
    totalPrice += parseFloat(element.textContent);
    });
         // parse into an Integer then do the adding
        document.getElementById("displayTotal").innerHTML = "Total amount is currently at <b>"+totalPrice+ "</b> PHP."; // problematic part.
    });
    
    // this snippet works fine
    $('figure.col-sm-3')
        .hide() // hide all of them, and then show if both `has` are true
        .has('tr:last-child>td:last-child:contains(' + year + ')')
        .has('tr:last-child>td:last-child:contains(' + month + ')')
        .show();
        
    return false; // to avoid that button submits the form
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">
    <div class="row">
    <!-- FORM AREA -->
        <p id="displayTotal"></p> <!-- display the total here -->
        <p>Show items by:</p>
        <form class="form-horizontal">
            <div class="form-group">
            <label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputMonth">
                        <option value="none"> - </option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputYear" class="col-sm-2 control-label">Select Year</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputYear">
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary">Show results</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="container">
    <div class="row"> <!-- FIRST SET OF ITEMS -->
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 1</h6>
            <img src="img1.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>November 7, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 2</h6>
            <img src="img2.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>December 2, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 3</h6>
            <img src="img3.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>L</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 4</h6>
            <img src="img4.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>XL</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
    </div>
</section>

答案 3 :(得分：0)

尝试parseInt或parseFloat。更好的选择是parseInt 

totalPrice += parseInt(price)

或 

totalPrice += parseFloat(price)

通过将最终总数四舍五入到一个合适的小数精度来完成（2在大多数情况下对货币都有意义！）

totalPrice = totalPrice.toFixed(2) /* only in case of parseFloat */

答案 4 :(得分：0)

var total= Array.from(
                $('figure').filter((i,e)=>{
                  var html=$(e).find('tr:eq(3) td:eq(1)').html();
                  return html.toLowerCase().indexOf($('#inputMonth').val().toLowerCase())>=0 &&  html.indexOf($('#inputYear').val())>=0

                })
           ).map((e)=>parseInt($(e).find('tr:eq(0) td:eq(1)').html())
           ).reduce((a,b)=>a+b,0)

DEMO

不要在Selector，MEANS中出错，获得预期的结果

相关问题
最新问题