Question

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'？

Answer 1

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

首先，简化原始设置：

//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'>"

最后，使用此代码收听按钮上的click事件：

$("#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’s fadeOut method时，淡出代码可能会轻松得多。

您似乎已经解决了your previous question，因此您可能想回答自己的问题。这样，人们就可以从你学到的东西中获利。

如何在Fly上替换tooltip数组值？

1 个答案: