Question

我有一个简单的媒体库，其中包含点击其他页面的图片。我还有一个“编辑”模式，允许用户更改媒体库名称，描述和删除照片等。在“编辑”模式下，我想禁用照片上的默认点击操作，并使其如此单击它们可以“选择”多个图像。然后，单击“取消”或“确定”，恢复常规默认图像单击HREF。我有以下代码，部分工作，但我的行为很奇怪。关于我在这里做错了什么或者更好的方法来实现这个想法？

$(".editAlbumButton").click(function() {
    $("#editTools").show();
    $(".mediaClick").preventDefault();
    $(".mediaClick").toggle(function() {
        $(this).addClass('mediaSelectHighlight');
        }, function() {
        $(this).removeClass('mediaSelectHighlight');
    });
}); 

$(".cancelButton").click(function() {
    $(".mediaClick").removeClass('mediaSelectHighlight');
    $("#editTools").hide();
    $(".mediaClick"). ??? (); // I don't know how to "Restore" default click action here ?
});

Answer 1

尝试bind和unbind事件，具体取决于哪种模式有效。

$(".editAlbumButton").click(function() {
    $(".mediaclick").unbind("click", /*hanlder*/);
}
...
$(".cancelButton").click(function() {
   $(".mediaclick").bind("click", /*handler*/);
}

Answer 2

为什么不使用标志例如editable。

var editable=false;
$(".editAlbumButton").click(function() {
    $("#editTools").show();
    editable=true;
    $(".mediaClick").toggle(function() {
        $(this).addClass('mediaSelectHighlight');
        }, function() {
        $(this).removeClass('mediaSelectHighlight');
    });
});
$(".cancelButton").click(function() {
    $(".mediaClick").removeClass('mediaSelectHighlight');
    $("#editTools").hide();
    editable=false;
});
$(".mediaClick").click(function() {
    if(editable){
        $(this).preventDefault();
        return;
    }
});

jQuery在编辑模式下更改单击行为

2 个答案: