Question

Flask / jinja2 / bootstrap noob here。我使用flask，jinja2和bootstrap模板制作基本网页。使用下面的{％for product in products％}，我试图展示多个产品面板（在这种情况下来自亚马逊），并且我试图使用{{product [＆＃39; imgurl＆＃39;]}}在每个面板中分配图像网址。除此之外，由于使用{％for products in products％}创建了多个按钮，我还想检测哪个按钮已被点击，并以某种方式将其传递回单击按钮时调用的下一页。，这两个问题详述如下：

   <div class="container">
    <div class="starter-template">
     <h1><span class="label label-primary">Here are the top results:</span></h1>

     {% for product in products %}
      <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="{{product['imgurl']}}" alt="...">
          <div class="caption">
            <h3>{{product['name']}}</h3>
            <p>{{product['blurb']}}</p>
            <p><a href="/output2" class="btn btn-primary" role="button"><element id={{ product['ASIN']}}>Choose Set</a></p>
          </div>
        </div>
      </div>
      {% endfor %}
     </div>
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="static/js/bootstrap.min.js"></script>
   </div> <!-- /.container-->

我希望我的html代码使用产品[＆＃39; imgurl＆＃39;]变量从外部网站获取图像，我知道如何为单个“img src”执行此操作=＆＃39;，但不是如何在for循环中执行此操作。
第二个问题是获取被点击的按钮的ID。正如您从上面的代码中看到的那样，我使用＆＃34;元素id = {{product [＆＃39; ASIN＆＃39;]}}＆＃34;为每个按钮分配一个ID，但我如何整合＆＃39; id＆＃39;按钮被点击到结果＆＃34; a href =＆＃34;＆＃34;＆＃34;呼叫，所以＆＃39; id被传递到下一页？

我不确定这是否可以在flask / jinja2 / bootstrap框架内完成。如果可以的话，对此的任何帮助/解决方案都会非常感激，到目前为止我花了很多时间寻找这个，但我一直无法找到明确的答案或方法。感谢..

Answer 1

对于问题1，我认为您可以使用点符号而不是索引字典。

{% for product in products %}
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="{{product.imgurl}}" alt="...">
          <div class="caption">
            <h3>{{product.name}}</h3>
            <p>{{product.blurb}}</p>
            <p>
                <a href="/output2" class="btn btn-primary" role="button">
                    <element id={{ product.ASIN}}>Choose Set</a>
            </p>
          </div>
        </div>
    </div>
{% endfor %}

对于第二个问题并获得元素的id，我喜欢这样做：

{% for product in products %}
      <div class="row">
          <a class="itemId" data-item-id="{{product.id}}">Click here to get the id</a>
      </div>
{% endfor %}

然后你可以使用jQuery并执行此操作：

$(".itemId").click(function(){
    var itemId = $(this).data("item-id");
    alert(itemId);
});

Answer 2

 <p><a href="/output2?{{product.ASIN}}" class="btn btn-primary" role="button">Choose Set</a></p>

这就是诀窍，它采用了与当前帧相关联的product.ASIN并将其传递到下一页!!

使用flask jinja2和bootstrap模板来回传递URL和ID

2 个答案: