在单独的元素中更改 javascript 变量

Question

我运行一个基于 php (phpbb)、javascript 和 html 的 WoW 公会论坛。长期以来，Wowhead 允许将 links 发布到他们的 item/spell ID 等。Wowhead JS 及其变量的基本代码是：

<script src="//static.wowhead.com/widgets/power.js"></script>
<script>var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }</script>

有一个扩展程序通过 HTML 文件将此代码放在每个页面的页脚中。每个 Wowhead link 发布的内容都将在 link 中进行转换，并带有一个工具提示来解释它 link 的目的。 wowhead_tooltips 变量的 '"renamelink": true' 部分使得一个项目或法术的任何 link 被重命名为它的确切名称 link编辑到。

问题：当我使用 Wowhead link 生成自定义 URL 时，即：

<a href="http://www.wowhead.com/spell=1953">Teleport</a>

而不是使用工具提示 Blink 显示 'Teleport'，它会将整个 URL 重命名为带有图标的 Blink，如 wowhead_tooltips变量。

我要实现的是：

任何直接 URL 到 Wowhead 应该转换成重命名的 spell/item。
Wowhead 的任何自定义 URL 都应保留其自定义文本，但检索工具提示。
这两个应该都可以在一个页面上实现。

我想出的最好的解决办法是在class的基础上给varwowhead_tooltips添加一个'if'函数，然后把class添加到[=63] =]s:

<script>if ($('a').hasClass("wowrename")) { var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": false } }</script>
<a class="wowrename" href="http://www.wowhead.com/spell=1953">Teleport</a>

这可行，但是，此解决方案的问题是，一旦脚本在页面上识别出带有 class "wowrename" 的一个 URL，它将停止重命名所有 links，这意味着自定义 URLs 和直接 URLs 不能在一个页面上混合。

我尝试过的任何其他解决方案，使用 ID、定义不同的变量等要么不起作用，要么产生相同的限制。

因此问题是，是否可以更改 Javascript 变量（在本例中 "var wowhead_tooltips { "renamelinks": false}" 每个元素 (URL) , 基于 id, class 或其他?

Answer 1

你必须在所有链接上循环，像这样：

$("a.wowrename").each(function() {
    // some code
});

Answer 2

这是一个简单的解决方案。这不是最好的方法。

var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }
$('a').hover(function() {
  if ($(this).hasClass('wowrename') {
    wowhead_tooltips.renamelinks = true;
  }
  else {
    wowhead_tooltips.renamelinks = false;
  }
});

我不知道 wowhead API 是如何工作的，但是如果 wowhead_tooltips 变量恰好在用户用鼠标指向 link 的那一刻加载（没有任何超时）- 这可能会失败或随机 work/not 工作。
原因可能是 javascript 不知道先执行哪个函数。

我希望这会奏效。如果不是-评论我会考虑另一种方式。

Answer 3

使用工具提示和 iccn 重命名的直接 link。

<a href="http://www.wowhead.com/spell=1953">Teleport</a>

带有工具提示和原始文本的自定义 link。我已将原始 link 文本存储为数据属性，以便我们可以在更改后恢复它。

<a class="wowrename" href="http://www.wowhead.com/spell=1953" data-value="Teleport">Teleport</a>

继续检查 static.wowhead.com/widgets/power.js 何时更改最后一个 link 文本。更改后，使用 data-value 值恢复，删除添加的创建图标的样式并停止计时器。

$(function () {
    //timmer
    checkChanged = setInterval(function () {
        // check for when the last link text has changed
        var lastItem = $("a.wowrenameoff").last();
        if (lastItem.text() !== lastItem.data('value')) {
            $("a.wowrenameoff").each(function () {
                //change value
                $(this).text($(this).data('value'));
                //remove icon
                $(this).attr('style', '');

                //stop timer
                clearInterval(checkChanged);
            });
        }

        i++;
    }, 100);
});

这确实会导致 link 图标闪烁，但在页面刷新后会重复闪烁。

JSFiddle demo

在单独的元素中更改 javascript 变量

Change javascript variable in seperate element

html

javascript

variables

element

class