我正在创建一个 jquery 插件。每当您双击具有 .editable 类的标签时，它都会将其替换为文本框或文本区域。当您单击 .editable 标记外部时，它将写入，然后它将删除文本框或文本区域并写回原始内容。
我第一次这样做时，它按预期工作。但是，如果我第二次单击不同的内容字段，那么当我单击时，它将被替换为我第一次单击的可编辑区域的内容。
要了解我在说什么，请访问 modx.harrishosting.com并双击主页。单击网页的不同部分，它将恢复正常。现在，双击 lerem ipsum 内容，然后单击网页的单独部分。 Lorem ipsum 内容没有恢复正常，而是替换为主页内容。
这是我的代码。请帮忙!
jQuery.fn.jqfEdit = function(){
return this.each(function(){
// Save "this" to "editable" because this changes when scope changes
var editable = this;
// Fix to display box-shaddow correctly when editable area is highlighted
$(editable).css({'display':'inline-block'});
// Highlight editable area with box-shaddow on hover
if (!($(editable).hasClass('.selected'))) {
// What to do on mouse over
$(editable).mouseenter(
function() {
$(editable).css({'-moz-box-shadow' : '0px 0px 10px #eec900', '-webkit-box-shadow' : '0px 0px 10px #eec900', 'box-shadow' : '0px 0px 10px #eec900'});
}
// What to do on mouse out.
).mouseleave(
function() {
$(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});
}
);
}
// Ending the if statement
else {
}
// TO DO: Fix double/double click bug in textarea
// What to do when double clicking an editable area
$(editable).dblclick(function() {
// Give the editable area the class "selected"
$(editable).toggleClass('selected');
// What to do if editable area is selected (has "selected" class)
if ($(editable).hasClass('selected')) {
// Remove the previously given highlight (box-shaddow) from the editable area
$(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});
// Take everything inside of editable div and assign it to variable named "content"
var content = $(editable).html();
// Get the height and width of editable div.
var height = $(editable).height();
var width = $(editable).width();
// Add a few pixels to the width for textbox
var textBoxHeight = height+5;
var textBoxWidth = width+10;
// If length of content is less than 50 characters then use a textbox
if (content.length < 50) {
$('.selected').html('<form id="myForm"> <input id="jqfEdit-textbox" type="text" style="height:' + textBoxHeight + '; width:' + textBoxWidth + '; padding: 2px;" name="myname" value="' + content + '" /> <input type="submit" value="Ok" /> <input type="button" name="Cancel" value="Cancel" /> </form>');
// If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
if ($('#jqfEdit-textbox').focus()) {
$('body').click(function() {
if ($('.selected').html(content)) {
$('.selected').toggleClass('selected');
}
});
$(editable).click(function(event){
event.stopPropagation();
});
}
}
// If length of content is more than 50 characters then use a textarea
else {
$('.selected').html('<form id="myForm"> <textarea id="jqfEdit-textarea" type="text" style="height:' + height + '; width:' + width + ';" name="myname">' + content + '</textarea> <input type="submit" value="Ok" /> <input type="button" name="Cancel" value="Cancel" /> </form>');
// If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
if ($('#jqfEdit-textarea').focus()) {
$('body').click(function() {
if ($('.selected').html(content)) {
$('.selected').toggleClass('selected');
}
});
$(editable).click(function(event){
event.stopPropagation();
});
}
}
}
});
});
};
最佳答案
一个可能的原因是您编写的某些 HTML ID 使用了特定值。您可能想将可编辑的 ID 附加到它的后面。我还没有足够详细地判断整个页面中是否有可能同时出现两种形式(即使其中一种形式被 CSS 隐藏)。如果发生这种情况，从那时起它将无法工作。
这不是唯一的原因，但快速阅读代码可能是一个原因。
关于javascript - 我的代码第一次执行正确，但第二次执行不正确(Javascript)。似乎变量没有正确更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4616961/