Подсчет предметов внутри двух выпадающих объектов

У меня есть аккордеон и два выпадающих ящика: ящик1 и ящик2. Как я могу подсчитать общее количество выпавших предметов в обоих ящиках. Вот скрипка.

Я добавил функцию внутри 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
person Yevgeniy Bagackiy    schedule 23.09.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

это должно работать, попробуйте переместить следующие строки

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 + ".");

Попробуйте эту скрипту.

person vanderlee    schedule 23.09.2016
comment
Спасибо за ответ, но что, если у меня есть цикл, как я могу разделить каждый счет? Любые идеи? вы можете увидеть отредактированный пост, спасибо - person Yevgeniy Bagackiy; 23.09.2016

arrow_upward
1
arrow_downward

Удалить

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

и добавить в функцию drop

var n = $( ".dropClass" ).length;   
$( "span" ).text( "Items Droped: " + n + ".");
person Camilo Vasquez    schedule 23.09.2016