0

TextboxButton 是一个数组。

TextboxButton = ["<input type='text' id='first_txt' value='Region 1' /> <input type='submit' id='first_edit' value='Edit'>", "<input type='text' id='second_txt' value='Region 2' /> <input type='submit' id='second_edit' value='Edit'>", "<input type='text' id='third_txt' value='Region 3' /> <input type='submit' id='third_edit' value='Edit'>"];

TextboxButton 用于图像画布上的工具提示。

当我单击第一张图片时，默认情况下会显示“区域 1”值。但是，当我将此默认值“区域 1”更改为其他文本时，例如。'Region 1 New' 那么如何在数组 'TextboxButton' 中将此 'Region 1' 替换为 'Region 1 New' ？

4

1 回答 1

0

现在我了解您要完成的工作。最好的解决方案是只存储文本框的值并在需要时生成表单。以下是所需的更改，之后您可以编辑一个值，打开另一个工具提示，再次打开第一个工具提示时该值将恢复。

首先，简化原始设置：

//tooltipTxt = ["<input type='text' id='first_txt' value='Region 1' /> <input type='submit' id='first_edit' value='Edit'>",
//    "<input type='text' id='second_txt' value='Region 2' /> <input type='submit' id='second_edit' value='Edit'>",
//   "<input type='text' id='third_txt' value='Region 3' /> <input type='submit' id='third_edit' value='Edit'>"];

tooltipTxt = ["Region 1", "Region 2", "Region 3"];

接下来，在创建工具提示时动态创建表单：

//tooltip.innerHTML = tooltipTxt[index];

tooltip.innerHTML = "<input type='text' id='generic_txt' value='"+tooltipTxt[index]+"' /> <input type='submit' id='generic_edit' value='Edit'>"

最后，使用这段代码监听按钮上的点击事件：

$("#generic_edit").click(function(){
   if(document.getElementById('generic_edit').value == "Edit"){
        document.getElementById('generic_txt').removeAttribute('disabled');
        document.getElementById('generic_txt').focus();
        document.getElementById('generic_edit').value = "Change";
    } else {
        document.getElementById('generic_txt').setAttribute('disabled', 'disabled');
        document.getElementById('generic_edit').value = "Edit";
        editedValue = $('#generic_txt').val();
        //document.getElementById('first_txt').value = editedValue;
        tooltipTxt[index] = editedValue;  // important line
        console.log('tooltip.innerHTML : ' + tooltip.innerHTML);
   }
   return false;
});

请注意：您不需要任何其他工具提示的额外代码。通过使用index上面的变量（用 标记的行// important line），值会自动保存到正确的数组位置。我希望这能解决你的问题。

此外，请注意您正在混合使用 JavaScript 和 jQuery 代码。这有效，但被认为是不好的做法。此外，您可以使用 jQuery 简化大部分代码。我没有仔细检查，但是当使用jQuery 的 fadeOut 方法时，你的淡出代码可能会容易得多。

看来您已经解决了上一个问题，因此您可能想回答自己的问题。这样，人们就可以从你学到的东西中获益。

于 2013-08-06T17:24:23.030 回答