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

问题描述 投票：0回答：1

大家好，我只想提前说声谢谢。我想在购物车页面上解决一些问题。这个应用程序是在烧瓶中制作的。

  1. 我有一个购物车，它可以使用 Python 创建的 Restful API 中的数据动态填充表中的行。目前，它还可以在 API 中添加价格并将其显示为小计的 html。我还可以点击该项目旁边的删除按钮，它会从 API 中删除该特定元素。问题是 我需要能够在删除项目后更新小计 html。 是的，我可以点击删除按钮，刷新页面后它将显示正确的小计，但这是不现实的。

  2. 在购物车中添加和删除商品后，右上角的购物车图标上也会有一个徽章，该徽章会根据 API 中元素的数量而递增。一旦我找出问题（标记为 1 的问题），我就可以弄清楚如何在删除项目时使徽章减少。我的主要问题是 购物车在移动到网站的不同选项卡时没有显示徽章。 JS 链接到基本 html，但我想由于 java 脚本没有在这些特定页面上运行，所以它不会显示。不确定如何解决这个问题。

  3. 如果购物车中没有商品，我想隐藏小计 html 和订单按钮。但由于某种原因，我无法让它切换，也不知道应该在哪里放置代码来检查 API 中是否没有项目。

我可能要求太多，但如果可能的话，如果您有任何见解，请提供帮助。我将附上下面的 javascript 代码、我的 Flask Python 路线以及购物车页面的 html。

定价pricing.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 %}

购物车Javascriptpricecart.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();
}

Flask路线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"})

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

javascript python ajax rest flask
1个回答
2
投票

  1. 您可以尝试将事件侦听器绑定到每一行（就像在循环中所做的那样），而是一次性绑定所有行。在 for 循环之后添加类似下面的代码并删除循环中的事件侦听器，希望它能起作用：

    document.querySelectorAll('.row-selector').on('click', function() {
    ... // do stuff with row 
})

  2. 这个问题可以使用flask的context_processor来解决。您可以在官方文档中阅读更多相关信息。总之，您可以将徽章长度放入模板的上下文中，然后在模板中的任何位置使用它，例如：

    @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>

  3. 最后，如果您有徽章长度（也可以为 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');
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.