0

我的这段代码由 Adob​​oe 的 RoboHelp 2017 自动创建到我的 HTML5 生成的帮助文件中：

<object id="MapCtrl" classid="CLSID:A8ECFBF5-08CC-4065-BD74-0FAD1EA61317" data-rhtags="1" class="" width="1" height="1">
</object>
<p style="font-family:Arial;font-size:12pt;font-weight: normal;font-style: normal;text-decoration: none;" data-rhtags="1" class="" align="left">In&nbsp;this&nbsp;Topic&nbsp;<a class="dropspot" href="javascript:TextPopup(this)" id="MTHotSpot46267"><span class="MTText" style="display: none;">Show</span><span class="MTText">Hide</span></a></p>

我正在尝试使用 javascript 来动态修改In&nbsp;this&nbsp;Topic&nbsp;具有本地化字符串的文本实例，而不影响锚标记中的显示/隐藏链接。

这是我目前的尝试：

function localizeMiniTOC(){
    const minitoc = document.querySelector('#MapCtrl + p');
    const text = minitoc.textContent;
    console.log (typeof text);
    console.log(text.includes('In\xa0this\xa0Topic'));
    if (text.includes('In\xa0this\xa0Topic') === true){
        let html = minitoc.innerHTML;
        linkStart = html.indexOf('<a');
        remaining = html.substring(linkStart,html.length);
        minitoc.innerHTML = 'En Este Tema ' + remaining;
    }
}

这确实改变了文本，但我遇到的问题是，这也会破坏 RoboHelp 创建的事件侦听器。例如，在我上面的代码之前，原始的 Firefox Inspector 是这样的。

注意有这个事件监听器： 在此处输入图像描述

这是我上面的代码之后的样子。

现在没有事件监听器： 在此处输入图像描述

我今天做了一些研究，我从这个链接中了解到使用 .innerHTML “删除内部数据，如事件侦听器”： Element innerHTML getting rid of event listeners

但我似乎无法想出一种不同的方法来覆盖锚标记之前的文本，而让显示/隐藏链接和事件侦听器毫发无损。

我尝试过的其他事情：

minitoc.insertAdjacentHTML('beforebegin','<p>En\xa0Este\xa0Tema\xa0' + remaining + '</p>');

（链接页面中的示例显示了如何通过附加到现有元素来执行此操作，但我需要覆盖指向锚标记的文本，而不是附加到元素。）

  • 我尝试使用 .setAttribute 重新创建 onclick 事件： minitoc.setAttribute('onClick()',TextPopup('MTHotSpot46267'));

  • 我试图重新创建事件侦听器，但这也不起作用： minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));

所有在线示例似乎都处理附加或前置，而不是覆盖文本。

如何在In&nbsp;this&nbsp;Topic&nbsp;不影响显示/隐藏链接和这些链接上的事件侦听器的情况下使用本地化字符串动态覆盖文本？

4

1 回答 1

0

也许没有办法在不对事件处理程序进行核对的情况下覆盖文本，但我确实设法修复了我的代码，以便它现在至少在该minitoc.innerHTML = 'En Este Tema ' + remaining;行重写我的段落之后重新添加事件处理程序。

这是我更新的功能：

function localizeMiniTOC(){
    const minitoc = document.querySelector('#MapCtrl + p');
    const anchor = document.querySelector('#MapCtrl + p > a');
    const text = minitoc.textContent;
    if (text.includes('In\xa0this\xa0Topic') === true){
        let html = minitoc.innerHTML;
        linkStart = html.indexOf('<a');
        remaining = html.substring(linkStart,html.length);
        if (anchor.id.includes('MTHotSpot') === true){
            minitoc.innerHTML = 'En Este Tema ' + remaining;
            minitoc.addEventListener('click', function(e){
                if (e.target.tagName === 'SPAN' && e.target.className==="MTText"){
                    TextPopup(anchor.id);
                }
            });
        }
    }
}

请注意，我在最初尝试的解决方法中出现了错误以重新添加事件侦听器。在这个不正确的代码中，我忽略了在第二个参数中正确调用该函数：

minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));

这是固定代码（取自我更新的函数）：

minitoc.addEventListener('click', function(e){
  if (e.target.tagName === 'SPAN' && e.target.className==="MTText"){
  TextPopup(anchor.id);
}

这导致事件侦听器被添加到段落中，然后只需确保在运行 TextPopup 函数之前单击 span 标签即可。

在这张图片中，您可以看到添加的事件： 检查器显示添加的事件

于 2021-12-16T13:50:21.053 回答