jQuery启用防止默认并为列表中的第一个孩子切换一个活动类答案

【问题标题】：jQuery enable prevent default and toggle an active class for first-child in a listjQuery启用防止默认并为列表中的第一个孩子切换一个活动类
【发布时间】：2013-07-11 11:15:17
【问题描述】：

我似乎无法弄清楚的两个小问题：

当您进入该页面时，我允许单击缩略图以转到其他页面。但是，当我单击“删除拇指”按钮时，我不允许用户单击，我使用阻止默认值。现在我的问题是当我点击“完成”按钮时，拇指仍然不可点击。我想在您点击“完成”后重新启用点击
我的第二个问题是 - 如果您单击“删除拇指”按钮，这将允许您使用可排序的 jQueryUI 重新排列拇指的顺序。

我在第一个孩子的 css 中有一个活动类。我希望活动的 li 只在列表中的第一个。因此，如果您将第一个 li 拖出，它将删除活动类，然后列表中的第一个 li 将成为活动类。

.gallery li a.active:first-child

我有下面的演示代码： http://jsfiddle.net/3E2Hg/73/

希望有人可以帮忙，

谢谢

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-sortable

【解决方案1】：

老兄，对于你的第一个问题，这是解决方案。

$(function cancelDeleteImages(){
    $(".cancelDeleteImages").click(function(event) {

        $('.cancelDeleteImages').hide(); 
        $('.deleteAllImages').show(); 

        $( "#sortable" ).sortable("disable");
        $('#sortable li a').unbind('click').click();
       // return true;
    });
});

第二个问题，没看懂，能不能详细解释一下

第二种解决方案：

$( "#sortable" ).sortable({
            //Need to allow the user to be able to scrollover the thumbnails on device
            //delay: 900, // touch and hold to activate li being sortable
            //scroll: true, // allow user to scroll over thumbnails
            placeholder: "ui-state-highlight",

            stop: function(event, ui) {

           $('ul#sortable a.active').removeClass('active');
        $('ul#sortable a:first').addClass('active');
            }
        });

将您的 .sortable 替换为上述内容。作品

【讨论】：

干杯，第二个问题：如果您单击删除“删除拇指”按钮，则在小提琴上。你会看到第一个 li 是蓝色的，如果你将它拖到列表中的其他位置我希望它删除蓝色的活动类并始终在列表的第一个 li 上添加活动类？
老兄，得到了解决方案；），已经编辑了代码，检查一下。如果这解决了您的问题，请标记为正确
干杯伙伴，工作请客！我真的应该再写一篇文章，但不确定您是否有任何想法……当您单击删除按钮时，它允许您重新排序。我正在使用一个名为 touch punch 的插件来在手机上进行分类。但是我想知道您是否知道如何允许滚动缩略图，目前您在移动列表项时无法滚动缩略图。我想知道是否可以延迟选择 li 然后允许滚动缩略图？

【解决方案2】：

对于问题 1 - 您可以使用 DEMO FIDDLE 的标志

代码-

var disonclick = false;

$(function deleteImage(){
    $(".deleteAllImages").click(function() {

        $('.deleteAllImages').hide();
        $('.cancelDeleteImages').show();

        //TODO: Need to disable href from being clickable when in delete mode
        disonclick = true;
        $('#sortable li a').click(function(e){
            if(disonclick) e.preventDefault();
        });        
        //TODO: Need to make active class toggle when first in the list (first li = active)

        $( "#sortable" ).sortable("enable");
        $( "#sortable" ).sortable({
            //Need to allow the user to be able to scrollover the thumbnails on device
            //delay: 900, // touch and hold to activate li being sortable
            //scroll: true, // allow user to scroll over thumbnails
            placeholder: "ui-state-highlight"
        });
    });
});

$(function cancelDeleteImages(){
    $(".cancelDeleteImages").click(function() {
        $('.cancelDeleteImages').hide(); 
        $('.deleteAllImages').show(); 
        disonclick = false;
        $( "#sortable" ).sortable("disable");  
    });
});

【讨论】：

【解决方案3】：

使用jQuery.on() 和jQuery.off() 函数进行事件处理，bind()/unbind() 函数也可以使用

阻止默认点击事件

$('#sortable li a').on("click",function() {
        return false;
    });

使用

启用

$('#sortable li a').off("click");

demo : http://jsfiddle.net/VZwV9/

希望这将帮助您解决 #1 问题

【讨论】：