Question

为非常混乱的代码道歉。我很困惑我应该放置$().ready(function()和个别函数。

什么有效： 1）$(".calc").change(function() - 这将使用从数据库填充的表中选择的数据更新span和div 2）加载页面时，在调用$(".calc").change(function()之前，函数addRow(e)设法将“hey”写入控制台日志，但失败并显示ReferenceError: Can't find variable: tbody addRow (furniture-product.php, line 396)。运行$(".calc").change(function()后，控制台日志将不再有效

什么行不通： 1）功能addRow(e) 2）函数removeRow(e)

我确定这是一个在错误的地方有一些小东西的情况，但我试过移动部分脚本但没有成功。

$().ready(function () {

    "use strict";
    var tbody = document.getElementById("the-tbody");

    document.getElementById("btn-add").addEventListener("click", addRow, false);

    tbody.addEventListener("click", removeRow, false);


    var radios = $('input[type=radio]');
    radios.on('change', function () {
        radios.each(function () {
            var radio = $(this);
            radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
        });
    });


    $(".calc").change(function () {
        calctotal()

    });

});



function addRow(e) {
    console.log("hey");
    var product_id = $('input[name="product_name"]').val();
    var product_price = $('input[name="product_price"]').val();
    var row = document.createElement('tr');
    row.innerHTML = '<td><input type="hidden" name="item_id[]" value="' + product_id + '"><p>' + name + '</p><input type="hidden" name="price[]" value="' + product_price + '" class="price">&pound;<span id="amount" class="amount">0</span> <span class="remove">[x]</span></td>';
    tbody.appendChild(row);
    update_amounts();
}



function removeRow(e) {
    var elm;
    for (elm = e.target; elm !== this; elm = elm.parentNode) {
        if (/\bremove\b/.test(elm.className)) {
            removeElement(elm.parentNode);
            e.stopPropagation();
            return;
            update_amounts();
        }
    }
}

function calctotal() {
    var total = 0;

    var radios = $('input[type=radio]');

    radios.each(function () {
        var radio = $(this);
        radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');

    });



    $(".calc:checked").each(function () {
        var a = this.value.split(",");
        total += parseFloat(a[0]);
        name = (a[1]);
        image = (a[2]);
        curtainid = (a[3]);
        curtaindesc = (a[4]);


        $("span.img").html('<div class="row curtain-img"><img src="images/furniture/' + image + '" class="img-responsive img-rounded" style="border: 5px solid #5f4865"></div>');


        $("div#product_name").html('<input type="hidden" name="product_name" value="' + curtainid + '">' + name + '');
        $("div#product_desc").html('' + curtaindesc + '');
        $("div#product_add").html('<input type="button" id="btn-add" value="Add">');
        $("div#product_price").html('<input type="hidden" name="product_price" value="' + total.toFixed(2) + '"><strong>&pound;' + total.toFixed(2) + '</strong>');

    });


}

很简单，HTML就是

<table id="myTable">

<tbody id="the-tbody"></tbody>

</table>

<input type="button" id="btn-add" value="Add">

JS小提琴：http://jsfiddle.net/pw25p3qt/

Answer 1

啊......你们都做对了。只需在顶部定义您的变量，即。在document.ready（）之前。

  var tbody=null;
  $().ready(function () {

"use strict";
tbody = document.getElementById("the-tbody");
 document.getElementById("btn-add").addEventListener("click", addRow, false);

tbody.addEventListener("click", removeRow, false);


var radios = $('input[type=radio]');
radios.on('change', function () {
    radios.each(function () {
        var radio = $(this);
        radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
    });
   });


  $(".calc").change(function () {
    calctotal()

  });

  });

Answer 2

代码存在许多问题 - 列出的内容太多了。

这是一个工作版本，其中一些原始代码被删除，只留下原始的添加/删除功能。

<强> HTML

<table id="myTable" border>
    <thead>
        <tr><th>Product</th><th>Unit Price</th><th>Quantity</th><th>Total Price</th><th>Remove</th></tr>
    </thead>
    <tbody id="the-tbody"></tbody>
    <tr><td id="totalCell" colspan="5">Total: &pound;<span id="total"></span></td></tr>
</table>
<input type="button" id="btn-add" value="Add" />

<强>的Javascript

$(function() {
    "use strict";
    $("#btn-add").on('click', addRow);
    var tbody = $("#the-tbody").on('click', '.remove', removeRow);//delegate click handling to the tbody element.
    calc();

    function calc() {
        var sum = 0;
        $('tr.product').each(function() {
            var qty = Number($(this).find('.qty').text()),
                price = Number($(this).find('.price').text()),
                amount = (qty * price).toFixed(2);
            $(this).find('.amount').text(amount);
            sum += Number(amount);
        });
        $('#total').text(sum.toFixed(2));
    }
    function addRow(e) {
        $('<tr class="product"><td>Sample Product</td><td>&pound;<span class="price">1.00</span></td><td><span class="qty">1</span></td><td>&pound;<span class="amount"></span></td><td><span class="remove">[x]</span></td></tr>').appendTo(tbody);
        calc();
    }
    function removeRow(e) {
        $(this).closest("tr").remove();
        calc();
    }
});

DEMO

注意删除按钮＆＃39; click action被委托给tbody元素。这是必要的，以确保稍后添加的每个删除按钮（作为产品行的一部分）具有所需的操作，而无需单独附加单击处理程序。

另请注意，addRow()结构中现在定义了所有工作函数removeRow()，calc()和$(function() {})。这可以确保诸如tbody之类的变量仍然在范围内（不需要求助于全局范围）。

使用EventListener和jQuery添加和删除JavaScript

2 个答案: