在Django中将项目从一个列表动态移动到另一个列表

Question

我正在尝试为食谱应用程序创建一个简单的界面，其中有一个成分列表，当点击一个成分时，它会从“成分”列移动到“膳食成分”列。 我正在尝试以一种简单的方式执行此操作，只需单击按钮、成分，然后将其移动到不同的列。 我是 JavaScript、JQuery 和 AJAX 的新手，所以我不太确定如何将它们拼凑在一起，但这是我目前在模板中的内容：

{% block title %}Home{% endblock title %}

{% block content %}
<div class="container">
  <div class="text-center">
    <h1>Create a Meal</h1>
  </div>
  <div class="row">
    <div class="col">
      <div class="text-center">
        <h3>Ingredients</h3>
          <div class="text-left">
            <ul>
              {% for ingredient in ingredients %}
                <div class="row">
                  <button id="btnName" class="btn my-1">{{ ingredient.name }}</button>
                </div>
              {% endfor %}
            </ul>
          </div>
      </div>
    </div>
    <div class="col-8">
      <div class="text-center">
        <h3>Current Meal</h3>
      </div>
      <div class="row">
        <div class="col">
          <div class="text-center">
            <h4>Meal Ingredients</h4>
            <div class="text-left">
            <ul class="justList">
            </ul>
          </div>
          </div>
        </div>
        <div class="col">
          <div class="text-center">
            <h4>Amount(g)</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script>
    $('#btnName').click(function(){
      var text = 'test';
      if(text.length){
          $('<li />', {html: text}).appendTo('ul.justList')
      }
    });
  </script>
{% endblock content %}

我可以将“test”字符串添加到新列表中，但无法删除它。 我还想动态添加成分按钮，以便当用户再次单击它时，它将返回到另一个列表。 我该如何进行？

Answer 1

首先，您可能应该更新模板中的{% for %}循环，以便按钮不会都具有相同的id 。 这是无效的 HTML ，因为id应该是唯一的。

然后，您可以将事件侦听器附加到.btn类（或与按钮对应的其他一些选择器）：

• 单击按钮时，从按钮的innerHTML获取成分的名称。
• 循环遍历现有的成分列表。
• 如果成分没有在列表中存在，添加它。
• 如果该成分确实存在于列表中，请将其删除。

下面是从您的代码派生的示例（运行代码段以查看其实际效果）。 如果您单击成分按钮一次，则会将该成分添加到列表中。 如果您再次单击它，它将从列表中删除该成分。

另请参阅我添加到代码中的内联注释。 显然，就您而言，您不会拥有这些“硬编码”成分。 相反，它们将由 Django 填充。 但是对于这个例子，我只是创建了一些示例成分。

 $('.btn').click(function() { var text = this.innerHTML; // the ingredient var itemFound = false; // flag to indicate if the ingredient already exists in the list $('ul.justList li').each(function() { // loop through the existing list of ingredients if ($(this).text() === text) { // if the ingredient already exists, change itemFound to true itemFound = true; } }); if (!itemFound) { // check if itemFound flag is false (item doesn't exist in the list yet) $('<li/>', { html: text }).appendTo('ul.justList') // if the item doesn't already exist, add it } else { // if it does, remove it $(`ul.justList li:contains(${text})`).remove(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="text-center"> <h1>Create a Meal</h1> </div> <div class="row"> <div class="col"> <div class="text-center"> <h3>Ingredients</h3> <div class="text-left"> <ul> <div class="row"> <button class="btn my-1">Milk</button> </div> <div class="row"> <button class="btn my-1">Sugar</button> </div> <div class="row"> <button class="btn my-1">Flour</button> </div> <div class="row"> <button class="btn my-1">Eggs</button> </div> </ul> </div> </div> </div> <div class="col-8"> <div class="text-center"> <h3>Current Meal</h3> </div> <div class="row"> <div class="col"> <div class="text-center"> <h4>Meal Ingredients</h4> <div class="text-left"> <ul class="justList"> </ul> </div> </div> </div> <div class="col"> <div class="text-center"> <h4>Amount(g)</h4> </div> </div> </div> </div> </div> </div>