如何添加“标记照片”按钮以开始标记/结束标记

Question

我正在使用此处的照片标记脚本

http://www.bryantan.info/jquery/5非常简单的代码。

效果很好，但始终处于标记启用模式。如何实现“标记照片”按钮，单击该按钮将启用标记，否则标记将被禁用。此外，完成标记后，可以单击此按钮以关闭标记。

喜欢facebook标记。

Answer 1

您需要一个var来切换最初设置为Boolean的{​​{1}}值。
如果该值为false，则返回您的图片点击次数 这是怎么做的：

jsBin demo (with basic button functionality)

false

比在某处添加按钮：

var tagEditing = false; // create this line

而不是添加<button id="startTag">Start tagging</button> 语句：

if

现在您只需要切换$('#tagit #btnsave').live('click',function(){ if( !tagEditing ){ return; } name = $('#tagname').val(); counter++; $('#taglist ol').append('<li rel="'+counter+'"><a>'+name+'</a> (<a class="remove">Remove</a>)</li>'); $('#imgtag').append('<div class="tagview" id="view_'+counter+'"></div>'); $('#view_' + counter).css({top:mouseY,left:mouseX}); $('#tagit').fadeOut(); // add backend code here, use mouseX and mouseY for the axis and counter. // ............ }); var，按钮文本和图像光标样式：

tagEditing

以及上传：

$('#startTag').click(function(){
   tagEditing = !tagEditing;

   $('#imgtag').css({cursor: tagEditing? 'crosshair' : 'default' });
   $(this).text(tagEditing? 'End tagging':'Start tagging');
});

此外，如果var $('#yourUploadButton').click(function(){ tagEditing = false; }); 您要将图片光标样式从tagEditing == false更改为crosshair（请参阅演示以了解具体方法）