jQuery Droppable - 如果 Dropped Area 有超过 3 个 <li> 元素，则添加 CSS 类答案

【问题标题】：jQuery Droppable - Add CSS class if Dropped Area has more than 3 <li> ElementsjQuery Droppable - 如果 Dropped Area 有超过 3 个 <li> 元素，则添加 CSS 类
【发布时间】：2015-05-07 11:10:46
【问题描述】：

我正在使用 jQuery Droppable 插件。

如果我的 Dropped Area 达到超过 3 个<li> 元素，我想添加一个 CSS 类 "stackFavs"，否则必须删除相同的类。

当我尝试使用以下代码仅用于拖放功能时会发生这种情况：..但我也有 onClick 方法，它在这种情况下不起作用。

if($('.header-favorites .h-droped-list li').length > 3) {
    $(".h-droped-list").addClass("stackFavs");
}

FIDDLE

jQuery

/* Menu Items Drag n Drop to create Short Cuts in Favorites Bar */
$(document).ready(function(){

    $('.rp-draggable li').not('li.pd-dropdown').each(function (i) {
        $(this).attr('uuid', + i);
    });

    /* jQuery Droppable */
    $(function() {
        $( ".mn-items .rp-draggable li" ).not('li.pd-dropdown').draggable({
            helper: "clone",
            placeholder: "ui-state-highlight",
        });
        $( ".header-favorites ul" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
                $(this).find(".placeholder").hide();
                $(ui.draggable).addClass("addedToFav").clone().appendTo(this);                              
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });


    /* Click Star Icon to Add to Drop Here Container */
    $('ul.rp-draggable li .fa-star-o').click(function(){
        var $target = $(this).closest("li"),
            $dropedList = $(".h-droped-list"),
            id = $target.attr("uuid");

        if(!$target.hasClass("addedToFav")){
            $target.addClass("addedToFav").clone().appendTo($dropedList);
            $dropedList.find(".placeholder").hide();
        }else{
            $dropedList
            .find("li")
            .each(function(index, item) {
                var $elem = $(item);

                if($elem.attr("uuid") == id){
                    $elem.remove();
                    $target.removeClass("addedToFav"); 
                }

                if($dropedList.children().length == 1){
                    var $lastItem = $($dropedList.children()[0]);
                    $lastItem.hasClass("placeholder") && $lastItem.show();
                }
            })
        }

    });

    /* Click Close Icon to Remove from Drop Here Container */
    $("ul.h-droped-list").on('click','li .fa-star-o',function(){
        var $target = $(this).closest("li"),
            $catalog = $("#catalog ul"),
            id = $target.attr("uuid"),
            $dropList = $target.parent("ul");

        $target.remove();

        $catalog
        .find("li")
        .each(function(index, item){
            var $elem = $(item);

            if($elem.attr("uuid") == id)
                $elem.removeClass("addedToFav");
        })

        if($dropList.children().length == 1){
            var $lastItem = $($dropList.children()[0]);
            $lastItem.hasClass("placeholder") && $lastItem.show();
        }

    });



});

HTML

<div class="mn-items">
    <h2>Drag</h2>
    <ul class="rp-draggable">
        <li>Item 1 <i class="fa fa-star-o"></i></li>
        <li>Item 2 <i class="fa fa-star-o"></i></li>
        <li>Item 3 <i class="fa fa-star-o"></i></li>
        <li>Item 4 <i class="fa fa-star-o"></i></li>
        <li>Item 5 <i class="fa fa-star-o"></i></li>
        <li>Item 6 <i class="fa fa-star-o"></i></li>
    </ul>
</div>

<div class="header-favorites">
    <h2>Drop Here...</h2>
    <ul class="h-droped-list">
        <li class="placeholder">Placeholder (hides if it has items)</li>
    </ul>
</div>

参考屏幕截图 - 最多 3 个元素

参考截图 - 超过 3 个元素

【问题讨论】：

你的意思是这样的：jsfiddle.net/k2b666Lb/2?
看看这个working demo
是的.. 感谢您的回复 MADALIN.. 但只有一个问题是，如果放置区域中的计数为 3，则“StackFavs”类也应该被删除....除了那，一切都很好。

标签： jquery jquery-ui jquery-ui-droppable

【解决方案1】：

我做了一些修复，让代码按预期工作。

类似的代码（查看非占位符选择器）：

if ($('.header-favorites .h-droped-list li:not(.placeholder)').length > 3) {
    $(".h-droped-list").addClass("stackFavs");
} else {
    $(".h-droped-list").removeClass("stackFavs");
}

被解雇：

丢弃事件
星星点击事件
移除点击事件

我已将catalog id 添加到主 div 或删除 wan 不起作用并加快了删除 bt 删除每个并使用 attr 选择器：

$catalog.find("li[uuid='"+id+"']").removeClass("addedToFav");

演示：http://jsfiddle.net/j8xu2tvL/

【讨论】：

优秀的@Irvin Dominin...这正是我想要的......你拯救了我的一天......感谢你的努力......

【解决方案2】：

将元素添加到可放置的 div 时，检查附加的 li 的数量

if($('.h-droped-list li').length <= 3){
   // if number less or equal 3 
   // $('.h-droped-list li').removeClass('.class_bigger_than_three').addClass('.class_less_than_three');
}else{
   // if number bigger than 3 
   // $('.h-droped-list li').removeClass('.class_less_than_three').addClass('.class_bigger_than_three');
}

在您的情况下，您可以使用.addClass() 和removeClass() 方法在类之间进行转换

【讨论】：