javascript — подсчет предметов внутри двух сбрасываемых объектов
У меня есть гармошка и две коробочки: box1 и box2. Как подсчитать количество выпавших предметов в обеих коробках. Вот играть на скрипке.
Я добавил функцию внутри 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>
Решение
это должно работать, попробуйте переместить следующие строки
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 + ".");
Попробуй это играть на скрипке.
Другие решения
удалять
$( document.body ).append( $( ".dropClass" ) );
и добавить в функцию drop
var n = $( ".dropClass" ).length;
$( "span" ).text( "Items Droped: " + n + ".");