在 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。 This is invalid HTML，因为ids 应该是唯一的。

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

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

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

另请参阅我添加到代码中的内联 cmets。显然，在你的情况下，你不会有这些“硬编码”的成分。相反，它们将由 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>