JQuery получить значение по клику в цикле Jinja2 - PullRequest
Новая
       11

JQuery получить значение по клику в цикле Jinja2

0 голосов
/ 26 января 2019

У меня есть небольшое приложение с бэкэндом фляги и шаблонизатором jinja2.

В html у меня есть цикл, который объединяет в пакеты, создавая 3 столбца на странице: 

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

У меня есть несколько jQuery, чтобы получить элемент, на который щелкают в каскадном раскрывающемся списке.Цикл jinja2 заполняет раскрывающийся список, проходя по циклу данных.JQuery получает значение из html по идентификатору (как ul ul): 

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

В конечном итоге мне нужно три значения, по одному для каждого пакета.Однако код возвращает только самый последний элемент, по которому щелкнули.Причина этого в том, что я не могу понять, как заставить jQuery получать по одному элементу в пакете или каким-либо образом связать его с пакетом.Можно ли как-нибудь указать номер партии в идентификаторе ul? 

$(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);
  });
});

1 Ответ

0 голосов
/ 28 января 2019

Отправка сообщения на случай, если это поможет кому-то еще.

В этом замечательном посте объясняется, как использовать переменную цикла в шаблоне колбы: количество строк в шаблонах колбы

Для моего кода я изменил идентификатор div на основе индекса цикла. 

{% 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}}">

В этом цикле я присвоил своему неупорядоченному списку идентификатор, подобный следующему: 

<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'));
  });
...