Django循环上的Jquery选择器

Posted 2023-02-24

【中文标题】Django循环上的Jquery选择器

【英文标题】：Jquery selector on Django loop

【发布时间】：2019-01-19 14:51:54

【问题描述】：

所以我有这个

% for producto in reparto_martes %
       <div class="col-md-3">
        <div class="card mb-4 box-shadow product-box">
          <img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail"  style="height: 225px; width: 100%; display: block;" src= producto.foto  data-holder-rendered="true">
          <div class="card-body">
            <h4 class="card-text producto_precio">$ producto.precio </h4>
            <h5 class="card-text producto_nombre"> producto.nombre </h5>
            <div class="d-flex justify-content-between align-items-center">
              <button type="button" class="btn btn-success anadir_button">Añadir</button>
              <small class="text-muted"></small>
            </div>
          </div>
        </div>
      </div>
% endfor %

看起来像这样：https://gyazo.com/0b329d87af9372250a53ae25347b59b0

当用户点击 anadir_button 时，我需要选择项目名称。

$(document).ready(function()
    $(".anadir_button").click(function()
        $('.producto_precio').clone().appendTo('#list_pedidos');
    );
);

^这一项只选择了所有三个项目（香蕉、bolson frutal、almendras）

$('.producto_precio').last()clone().appendTo('#list_pedidos');

^而这只是选择'almendras'。

【参考方案1】：

您需要从当前单击的按钮开始并导航到最近的 .card-body 祖先。现在您可以找到相应的产品了。

这是一个例子：

$(".anadir_button").click(function(e)
  console.log($(this).closest('.card-body').find('.producto_nombre').text());
                   //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
);

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-3">
        <div class="card mb-4 box-shadow product-box">
            <img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail"  style="height: 225px; width: 100%; display: block;" src= producto.foto  data-holder-rendered="true">
            <div class="card-body">
                <h4 class="card-text producto_precio">$0</h4>
                <h5 class="card-text producto_nombre">Bananas</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <button type="button" class="btn btn-success anadir_button">Añadir</button>
                    <small class="text-muted"></small>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mb-4 box-shadow product-box">
            <img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail"  style="height: 225px; width: 100%; display: block;" src= producto.foto  data-holder-rendered="true">
            <div class="card-body">
                <h4 class="card-text producto_precio">$0</h4>
                <h5 class="card-text producto_nombre">Bolson frutal</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <button type="button" class="btn btn-success anadir_button">Añadir</button>
                    <small class="text-muted"></small>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mb-4 box-shadow product-box">
            <img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail"  style="height: 225px; width: 100%; display: block;" src= producto.foto  data-holder-rendered="true">
            <div class="card-body">
                <h4 class="card-text producto_precio">$0</h4>
                <h5 class="card-text producto_nombre">Almendras</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <button type="button" class="btn btn-success anadir_button">Añadir</button>
                    <small class="text-muted"></small>
                </div>
            </div>
        </div>
    </div>

</div>