计算两个可放置对象内的项目答案

【问题标题】：Counting items inside two droppable objects计算两个可放置对象内的项目
【发布时间】：2023-03-21 07:50:01
【问题描述】：

我有一个手风琴和两个可放置的盒子：box1 和 box2。如何计算两个盒子中掉落物品的总数。这里是fiddle。

我在function(event, ui) { 中添加了函数，但如果我有两个或更多的循环，它对每一行都计数。怎么分开？

这是带循环的代码：

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

【问题讨论】：

标签： javascript php jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

应该可以，尝试移动以下行

var n = $( ".dropClass" ).length;   
$( "span" ).text( "Items Dropped: " + n + ".");

里面

drop: function(event, ui)

所以你的最终代码会是这样的：

//add style
$('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
var n = $( ".dropClass" ).length;   
$( "span" ).text( "Items Dropped: " + n + ".");

试试这个fiddle。

【讨论】：

感谢您的回答，但是如果我有循环怎么办，我怎么能分开每个计数？有任何想法吗？您可以看到已编辑的帖子，谢谢

【解决方案2】：

删除

$( document.body ).append( $( ".dropClass" ) );

并添加函数drop

var n = $( ".dropClass" ).length;   
$( "span" ).text( "Items Droped: " + n + ".");

【讨论】：