Question

我对AJAX和jQuery没什么经验，所以如果这看起来很简单就道歉。

我有一个通过PHP foreach循环从数据库生成的成分列表：

<div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left">
            <div id="scroll" class="card">
              <a href="javascript:showhide('green')"><h2 class="is-center">green</h2></a>
              <ul id="greens" class="card-content-ingredients" style="list-style-type: none;">
                <?php
                foreach ($greens as $green) {
                  echo "<li>";
                  echo "<span class='item-name-small'>" . $green['name'] . "</span>";
                  echo "<span class='item-description-menu'>" . $green['description'] . "</span>";
                  echo "<span class='content-right'>";
                  echo "<a class='minus increment' href='#'> - </a>";
                  echo "<input class='quantity' type='text' size='1' id='" . $green['id'] . "' name='" . $green['id'] . "' value='0'>";
                  echo "<a class='plus increment' href='#'> + </a>";
                  echo "</span>";
                  echo "</li>";
                  echo "</br>";
                }?>
              </ul>

              <a href="javascript:showhide('essentials')"><h2 class="is-center">essentials</h2></a>
              <ul id="essentials" class="card-content-ingredients" style="list-style-type: none;">
                <?php
                foreach ($essentials as $essential) {
                  if (($essential['subtype'] == "veggies") || ($essential['subtype'] == "fruit")) {
                    echo "<li>";
                    echo "<span class='item-name-small'>" . $essential['name'] . " </span>";
                    echo "<span class='item-description-menu'> " . $essential['description'] . "</span>";
                    echo "<span class='content-right'>";
                    echo "<a class='minus increment' href='#'> - </a>";
                    echo "<input class='quantity' type='text' size='1' id='" . $essential['id'] . "' name='" . $essential['id'] . "' value='0'>";
                    echo "<a class='plus increment' href='#'> + </a>";
                    echo "</span>";
                    echo "</li>";
                    echo "</br>";
                  }
                }?>
              </ul>

              <a href="javascript:showhide('crunch')"><h2 class="is-center">crunch</h2></a>
              <ul id="crunch" class="card-content-ingredients" style="list-style-type: none;">
                <?php
                foreach ($essentials as $essential) {
                  if (($essential['subtype'] == "crunch")) {
                    echo "<li>";
                    echo "<span class='item-name-small'>" . $essential['name'] . " </span>";
                    echo "<span class='item-description-menu'> " . $essential['description'] . "</span>";
                    echo "<span class='content-right'>";
                    echo "<a class='minus increment' href='#'> - </a>";
                    echo "<input class='quantity' type='text' size='1' id='" . $essential['id'] . "' name='" . $essential['id'] . "' value='0'>";
                    echo "<a class='plus increment' href='#'> + </a>";
                    echo "</span>";
                    echo "</li>";
                    echo "</br>";
                  }
                }?>
              </ul>

              <a href="javascript:showhide('grains')"><h2 class="is-center">grains</h2></a>
              <ul id="grains" class="card-content-ingredients" style="list-style-type: none;">
                <?php
                foreach ($essentials as $essential) {
                  if (($essential['subtype'] == "grains")) {
                    echo "<li>";
                    echo "<span class='item-name-small'>" . $essential['name'] . " </span>";
                    echo "<span class='item-description-menu'> " . $essential['description'] . "</span>";
                    echo "<span class='content-right'>";
                    echo "<a class='minus increment' href='#'> - </a>";
                    echo "<input class='quantity' type='text' size='1' id='" . $essential['id'] . "' name='" . $essential['id'] . "' value='0'>";
                    echo "<a class='plus increment' href='#'> + </a>";
                    echo "</span>";
                    echo "</li>";
                    echo "</br>";
                  }
                }?>
              </ul>
            </div> <!-- END CARD -->
          </div> <!-- END ESSENTIALS -->

目前，我知道每个成分旁边都有-和+出现在文字输入旁边。我尝试做的是更改代码，当客户点击每个单独的项目时，它会被添加到具有订单摘要的不同div中。第二个div与项目列表位于同一页面上。

Answer 1

如果您只想将列表项复制到另一个div，可以这样做：

$(function (){
    $('ul.card-content-ingredients li').click(function(){
        $('#new-div-id ul').append($(this));
    }
});

从PHP生成的List（w / jQuery + AJAX）

1 个答案: