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

首先，您可能应该更新模板中的id循环，以使按钮并非都具有相同的id。 This is invalid HTML，因为.btn应该是唯一的。

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

单击按钮时，从按钮的$('.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(); } });中获取配料的名称。
遍历现有成分列表。
如果列表中不存在该成分，则将其添加。
如果该成分确实存在于列表中，则将其删除。

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

另请参阅我添加到代码中的内联注释。显然，在您的情况下，您将不需要这些“硬编码”成分。相反，它们将由Django填充。但是对于这个例子，我只是创建了一些样本成分。

<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>

range t=1..2;
range v=1..4;
range vl=0..4;
range vll=1..5;
dvar boolean x[vl][vll][t];

subject to
{
      
forall (i in v, k in t)
 constraint1:     
sum(j in vll: j!=i) x[i][j][k] == sum (j in vl: j!=i) x[j][i][k];

}

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

1 个答案: