jQuery在jinja2循环中获取点击值答案

【问题标题】：jQuery get clicked value in jinja2 loopjQuery在jinja2循环中获取点击值
【发布时间】：2019-06-19 19:01:25
【问题描述】：

我有一个带有烧瓶后端和 jinja2 模板的小应用程序。

在 html 中，我有一个循环组织成批次，在页面上创建 3 列：

    {% for batch in df.iterrows() | batch(3) %}
      <div class="row">
        {% for row_id, row in batch %}

我有一些 jQuery 来获取在级联下拉列表中单击的项目。 jinja2 循环通过遍历数据框来填充下拉列表。 jQuery 通过 ID（作为 ul id）从 html 中获取值：

 <ul id="model1" class="list-group">

最终我需要三个值，每个批次一个。但是，该代码仅返回最近单击的项目。原因是我不知道如何让 jQuery 每批获取一个项目——或者以某种方式链接到该批。我可以以某种方式将批号放在ul id中吗？

$(document).ready(function(){
  $('ul#menu li').hover(function(){
     $(this).children('ul').delay(20).slideDown(200);
  }, function(){
     $(this).children('ul').delay(20).slideUp(200);
  });

  $('#model1 li').on("click", function(e){
    e.stopPropagation();
    e.preventDefault();
    console.log('model1 ' + e.target.getAttribute('data-val'))
    $("input[name=suggestion1]").val(e.target.getAttribute('data-val'));
  });

//CODE is past here DOESN'T work but I left it in to give an idea

  $('#model2 li').on("click", function(e){
    e.stopPropagation();
    e.preventDefault();
    console.log('model2 ' + e.target.getAttribute('data-val'))
    $("input[name=suggestion2]").val(e.target.getAttribute('data-val'));

  });
  $('#model3 li').on("click", function(e){
    e.stopPropagation();
    e.preventDefault();
    console.log('model3 ' + e.target.getAttribute('data-val'))
    $("input[name=suggestion3]").val(e.target.getAttribute('data-val'));
  });

  $("form").submit(function(){
    var s1 = $("input[name=suggestion1]").val();
    var s2 = $("input[name=suggestion2]").val();
    var s3 = $("input[name=suggestion3]").val();
    console.log(s1, s2, s3);
  });
});

【问题讨论】：

标签： javascript jquery html-lists jinja2

【解决方案1】：

发布此内容以防对其他人有所帮助。

这篇优秀的文章解释了如何在烧瓶模板中使用循环变量：count number of rows in flask templates

对于我的代码，我根据循环索引更改了 div ID。

{% for batch in recomm_df.iterrows() | batch(3) %}
     <div class="row">
      {% for row_id, row in batch %}
       <div class="col-md-4" id="cat_{{loop.index}}">

在那个循环中，我给了我的无序列表一个 ID，比如：

<ul id="cat_sug" class="list-group">

然后你可以获取那些在 JQuery 中被点击的数据：

  $('#cat_1 #cat_sug').on("click", function(e){
    e.stopPropagation();
    e.preventDefault();
    console.log('cat_1 ' + e.target.getAttribute('data-val'))
    // var s1 = e.target.getAttribute('data-val');
    $("input[name=suggestion1]").val(e.target.getAttribute('data-val'));
  });

【讨论】：