Question

您好，我只想提前谢谢您。我想在购物车页面上解决一些问题。此应用程序是在烧瓶中完成的。

我有一个购物车，可以使用python创建的Restful API中的数据动态填充表中的行。目前，它还可以在API中添加价格并将其显示为小计的html。我也可以点击项目旁边的Delete按钮，它将特定元素从API中删除。问题是删除项目后，我需要能够更新小计html。是的，我可以点击删除按钮，刷新页面后它将显示正确的小计，但这是不现实的。
在添加和删除购物车中的项目时，我还在右上角的购物车图标上有一个徽章，该徽章根据API中的元素数量递增。一旦找出问题（标记为1的问题），我就可以弄清楚如何在删除项目后减少徽章。我在这里的主要问题是购物车移动到网站的其他选项卡时没有显示徽章。 JS链接到基本html，但是我想由于Java脚本未在这些特定页面上运行，因此不显示。不知道如何解决此问题。
如果购物车中没有商品，我想隐藏小计html和订购按钮。但是由于某种原因，我无法切换它，也不知道应该将代码放在哪里以检查API中是否没有项目。

我可能要问的太多了，但如果您有任何见解，请尽可能提供帮助。我将在下面附上javascript的代码，我的flask python路由以及购物车页面的html。

定价Price.html

p{% extends 'base.html' %}
{% block content %}
  <h1>Pricing</h1>
  <div class="row">
    <div class="container col-sm-6">
      <div class="container border">
        <table id='table'>
          <thead>
            <th><h5>Equipment</h5></th>
            <th "><h5>Price</h5></th>
          </thead>
            {% for quip in pricing %}
              <tr style="height:25px;" class="border">
                <td id='pricewidth'>{{quip}}</td>
                <td id='pricewidth' style='text-align:center;'>{{pricing[quip]}}</td>
                <td ><button type="button" name="button" class="btn btn-primary">Add</button></td>
              </tr>
            {% endfor %}
        </table>
      </div>
    </div>
    <div class="container col-sm-6">
      <table id='cart'>
      </table>
      <div id='pricefooter'>
        <h1 style='margin-top:25px; border-top:.5px black solid;'>Subtotal: $<span id='subtotal'>0</span></h1>
        <form action="{{url_for('Order')}}"><button type="submit" name="button" class='btn btn-warning'>Order</button></form>
      </div>
    </div>
  </div>
{% endblock content %}

购物车Javascript pricecart.js

var tablerows = document.getElementById('table').rows.length;
var table = document.getElementById('table');
var cart = document.getElementById('cart');
var subtotal = document.getElementById('subtotal');
var username = document.getElementById('username').innerHTML;
var cartBadge = document.getElementById('cartbadge');
var pricesub = document.getElementById('pricefooter');
// On load cart
window.onload = function wowzers(){
  var array = [];
  var sum = 0;
  // Get Data
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'pricing/orders/' + username +'/api', true);
  xhr.onload = function(){
    var data = JSON.parse(this.response);

    cartBadge.innerHTML = data.length

    if(xhr.status >= 200 && xhr.status < 400){
      for(x in data){
        for(key in data[x]){
          array.push(Number(data[x][key]));
          sum+=Number(data[x][key]);
          subtotal.innerHTML = sum;
          row = cart.insertRow(-1);
          // Delete Data
          row.addEventListener('click', function deleterow(){
            index = this.rowIndex;
            // subtotal.innerHTML = sum-Number(cart.rows[index].cells[1].innerHTML);
            $.post('pricing/orders/delete', {
              delete_item: index
            });
             cart.deleteRow(index);
          });
          cell1 = row.insertCell(0);
          cell2 = row.insertCell(1);
          cell3 = row.insertCell(2);
          cell1.innerHTML = key;
          cell2. innerHTML = data[x][key];
          cell3. innerHTML = "<button class='btn btn-danger'>Delete</button>"
        }
      }
      console.log(sum);
    }else{
      console.log(error)
    }
  }
  xhr.send()
}

//Dynamic Cart
for(x = 0; x < tablerows; x++){
  table.rows[x].addEventListener('click', addCartItem);
}
function addCartItem(ev){
  var array = [];
  var sum = 0;
  index = this.rowIndex;
  equipmentCell = table.rows[index].cells[0];
  priceCell = table.rows[index].cells[1];
  equipmentName = equipmentCell.innerHTML;
  equipmentPrice = priceCell.innerHTML;
  // Post Data
  $.post('/pricing/orders/' + username + '/api', {
    javascript_data: JSON.stringify({[equipmentName]:equipmentPrice})
  });
  cartrow = cart.insertRow(-1);

  // Delete Data
  cartrow.addEventListener('click', function deleterow(){
    index = this.rowIndex;
    // subtotal.innerHTML = sum-Number(cart.rows[index].cells[1].innerHTML);
    $.post('pricing/orders/delete', {
      delete_item: index
    });
    cart.deleteRow(index);
  });
  cell1 = cartrow.insertCell(0);
  cell2 = cartrow.insertCell(1);
  cell3 = cartrow.insertCell(2);
  cell1.innerHTML= equipmentName;
  cell2.innerHTML = equipmentPrice;
  cell3.innerHTML = "<button class='btn btn-danger'>Delete</button>";
  // Open Api information
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'pricing/orders/' + username +'/api', true);
  xhr.onload = function(){
    var data = JSON.parse(this.response);
    cartBadge.innerHTML = data.length
    if(xhr.status >= 200 && xhr.status < 400){
      for(x in data){  
        for(y in data[x]){
          array.push(Number(data[x][y]));
          sum+=Number(data[x][y]);
          subtotal.innerHTML = sum;
        }
      }
    }else{
      console.log(error);
    }
  }
  xhr.send();
}

烧瓶路线routes.py

@app.route('/pricing/orders/<user_name>/api', methods=['POST', 'GET'])
@login_required
def api(user_name):
    user_name = current_user.username
    if request.method == 'POST':
        cart.append(json.loads(request.form["javascript_data"]))
    return jsonify(cart)

@app.route('/pricing/orders/delete', methods=['POST', 'GET'])
@login_required
def delete_item():
    if request.method == 'POST':
        print(cart[json.loads(request.form["delete_item"])])
        cart.pop(json.loads(request.form["delete_item"]))
        print(cart)
    return jsonify({"whoa": "there"})

我是菜鸟，所以这可能是一个漫长的问题，一个简单的问题。谢谢大家！

Answer 1

您可以尝试不将事件侦听器绑定到每一行（就像您在循环中那样），而是一次绑定全部。在for循环之后，在下面添加类似代码的内容，并在循环中删除event-listener，希望它能起作用：
```
document.querySelectorAll('.row-selector').on('click', function() {
    ... // do stuff with row 
})
```
可以使用flask的context_processor解决此问题。您可以在official documentation中了解更多信息。简而言之，您可以将徽章长度放在模板的上下文中，然后在模板的任何位置使用它，例如：
```
@app.context_processor
def inject_badge_length()
    badge_length = ... // calculate badge length for current user
    return {'BADGE_LENGTH': badge_length}
```
然后您可以在模板中使用它，例如：
```
<div class="badge-length">{{ BADGE_LENGTH }}</div>
```
最后，如果您有徽章长度（也可以为0），则可以使用CSS和javascript隐藏小计的html，如下所示：
```
#cart {
    opacity: 0;
}

#cart.active {
    opacity: 1;
}
```
并在js中将其附加到deleterow事件函数（在这种情况下，它可以是匿名（无名）函数）：
```
if (cartBadge.innerHTML === "0") {
    cart.classList.remove('active');
}
```
并在“ addCartItem”函数结尾处的某个位置附加：
```
if (!cart.classList.contains('active') && cartBadge.innerHTML !== "0") {
    cart.classList.add('active');
}
```

从API数据切换Div隐藏/显示

1 个答案: