Question

好的，这就是我想知道的。我有一个包含产品的页面，它只是产品名称+复选框。如果用户选中复选框，是否可以display: none;预先编写的适用于购物车的代码？让我们说这个用户想要一个Basic standby overlay并且他检查复选框，这个代码被添加到购物车并且它适用于总价格。我是这样的。

我有一个完整页面的jsFiddle here，或者您可以查看实时版本here。

<table cellspacing="2" cellpadding="0" border="0" width="320">
  <tr>
    <td width="170" valign="top" align="left">
      <div class="product_name">Basic standby overlay</div>
    </td>
    <td width="30" valign="top" align="center">
      <input type="text" class="quantity" value="1" maxlength="2" />
    </td>
    <td width="70" valign="top" align="center">
      <div class="product_total_cost price" data-val="10">10 €</div>
    </td>
    <td width="9" valign="top" align="right">
      <div class="remove_product">X</div>
    </td>
  </tr>
</table>

<tr>
  <td width="250">1x Basic standby overlay:</td>
  <td width="15" align="left"><input class="test" type="checkbox" name="basic_standby" value="0" data-val="10" /></td>
</tr>

此外，这与前一个问题的问题不同，这是一个我想知道的新问题。

Answer 1

将其分解为两个更简单的问题......

首先，检测复选框has been changed何时使用事件来维护已检查项目列表。

然后，只要选中的项目列表发生更改，就会完全重建侧面板。为列表中的每个项目输出一行（或div），并随时累计价格，以便输出总行数。

这样，您无需担心动态添加/隐藏/显示行。

示例代码（未经测试）：

完整代码Fiddle

$('input[type=checkbox]').click(function () {
    var checked = [];
    // Get a list of all currently checked items
    $('input[type=checkbox]').each(function () {
        if ($(this).is(":checked")) {
            checked.push($(this).attr('name'));
        }
    });
    buildCart(checked);
});

function buildCart(checked) {
    // This one just builds the sidebar on demand. Quite useful if cart contents can be
    // updated many ways (eg in another tab).

    $("#cart_items").empty();
    //For each checked item, add a sidebar element
    for (var i = 0; i < checked.length; i++) {
        //build cart item as appropriate.
        var newItem = $("<div>");

        /*Messy code to extract values from html and build element*/

        $("#cart_items").append(newItem);

    }
}

是否有可能做到这一点？ jQuery购物车

1 个答案: