如何给出对象in列表，并根据Django中的每个列表in添加单击事件

Question

在我的Django代码中，我有一个价格清单。现在，我给出了唯一的ID，这些ID运行良好，但是当我尝试添加一个click事件时，单击事件只对一个列表项连续工作。

      {% for price in logistic_branch_pricing %}
      <h1 id="select-delivery-location-{{price.id}}" 
   onclick="calculateDeliveryPrice()">{{ price.id }}-{{price.small_kg_price}}
      </h1>
      
      {% endfor %}

   {% for price in logistic_branch_pricing %}
   <script>
    function calculateDeliveryPrice() {
      var omo = document.getElementById("select-delivery-location-{{ price.id }}")
      omo.classList.add('d-none')
      console.log(omo)
    }
  </script>
   {% endfor %}

Answer 1

您不必在<script>标记上添加循环，只需在javascript onclick函数中传递事件关键字，如下所示

{% for price in logistic_branch_pricing %}
   <h1 id="select-delivery-location-{{price.id}}" onclick="calculateDeliveryPrice(event)">{{ price.id }}-{{price.small_kg_price}}
   </h1>
{% endfor %}

在你的javascript里面这样做

<script>
  function calculateDeliveryPrice(e) {
      var omo = e.target
      omo.classList.add('d-none')
      var small_kg_price = omo.textContent.split('-')[1] // return small_kg_price
      console.log(omo) // returns element
      console.log(omo.id) // returns id of element
  }
</script>