时间戳

首页 > 解决方案 > jQuery在jinja2循环中获取点击值

javascript - jQuery在jinja2循环中获取点击值

问题描述

我有一个带有烧瓶后端和 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);
  });
});

标签： javascriptjqueryhtml-listsjinja2

解决方案

发布这个以防它帮助别人。

这篇优秀的文章解释了如何在烧瓶模板中使用循环变量：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'));
  });

推荐阅读