Question

我有一个可折叠区域的手风琴和循环。我设法计算两个可放置字段的项目，但我得到了计数的问题，我需要它计算每一行分开，而不是两个行在一起。我在这里有一个fiddle，它可以正常工作一行，但是当我试图让它循环问题出现时。而且如何在物品被移除后减少物品？

这是带循环的代码：

<body style="background-color:white;" onload="startTime()"> 
<h1 class="ui-widget-header">Products</h1>    
<div id="myAccordion">
<h3><a href="#">T-Shirts</a></h3>
    <div>
        <ul>
            <li>Lolcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>Buckit Shirt</li>
        </ul>
    </div>
<h3><a href="#">Bags</a></h3>
    <div>
        <ul>
            <li>Zebra Striped</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </div>
<h3><a href="#">Gadgets</a></h3>
    <div>
        <ul>
            <li>iPhone</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    </div>
</div>
<label>
<?php
    $len=2;
    for($y=0;$y<$len;$y++)
    {
        echo "<div class='proc'> <pre>";
        echo "<span> </span><br /></pre>";  
?>
    <div id="procLeader">
        <label>Box1:</label>
        <div class="ui-widget-content">
        <div id="procleader">
            <ol>
                <li class="placeholder" name="procleader">Add here</li>
                <input type="hidden" name="procleader" id="hiddenListInput3" />
            </ol>
        </div>
        </div>
    </div>
    <div id="procChecker">
        <label>Box2:</label>
        <div class="ui-widget-content">
        <div id="procchecker">
            <ol>
                <li class="placeholder" name="procchecker">Add here</li>
                <input type="hidden" name="procchecker" id="hiddenListInput4" />
            </ol>
        </div>
        </div>
    </div>
<?php       
    echo "</div>";                      
    }
?>
</label>
</body>

Answer 1

请检查此代码。主要思想是在HTML对话框中使用唯一的id。因此，如果我们在循环中创建DOM，那么不要尝试分配它们id;而是去class。在这里，我添加了2行，并在HTML，JS和CSS中将id更改为class：

https://jsfiddle.net/n5df9upr/16/

$(function() {
          var itm = [];
          $("#savebutton").click(function() {
            LISTOBJ.saveList();
          });
          $("#myAccordion").accordion({
            heightStyle: "content",
            active: false,
            collapsible: true
          });
          $("#myAccordion li").draggable({
            appendTo: "body",
            helper: "clone"
          });
          $(".leader ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
              var zz = ui.draggable.text()
              var xyz = itm.includes(zz);
              if (xyz === false) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text())
                  //.addClass("cart-item")
                  .addClass('dropClass')
                  .appendTo(this);

                //add to array
                itm.push(zz);
                //add style
                $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
                var n = $(this).closest("div.proc").find(".dropClass").length; //finding the items within own container
                $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); //setting the text in own container

              } else {
                alert('Name is Already Exist');
              }

            }
          }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
              $(this).removeClass("ui-state-default");
            }
          });
          $(".checker ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
              var zz = ui.draggable.text()
              var xyz = itm.includes(zz);
              if (xyz === false) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text())
                  //.addClass("cart-item")
                  .addClass('dropClass')
                  .appendTo(this);

                //add to array
                itm.push(zz);
                //add style
                $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
                var n = $(this).closest("div.proc").find(".dropClass").length;
                $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");

              } else {
                alert('Name is Already Exist');
              }

            }
          }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
              $(this).removeClass("ui-state-default");
            }
          });
          $("#myAccordion ul").droppable({
            drop: function(event, ui) {
              $(ui.draggable).remove();
              var zz = ui.draggable.text()
              $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").removeClass('bred');

              var indexItm = itm.indexOf(zz);
              if (indexItm > -1) {
                itm.splice(indexItm, 1);
              }
            },
            hoverClass: "ui-state-hover"
              //accept: '.cart-item'
          });
        });

在循环中计算可放置区域中的项目

1 个答案: