javascript - 选择图片后如何使用waitForKeyElements显示信息？

Question

我编写了一个脚本，将图像源 URL 中包含的数字添加到页面。效果很好!

但是，我还希望它在具有 AJAX 驱动的选项卡的页面上运行。
我试过使用 waitForKeyElements 但我不知道如何让它工作，而且我不了解 jQuery。

当我使用 #dolls 时，它会将所有选项卡的所有内容放在页面上...当我使用 div.dolls 时，它会禁用加载娃娃的按钮。

// ==UserScript==
// @name        Dex# of Pokedolls
// @namespace   http://trueidiocy.us
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=collection
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=giveaway
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=regional
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=shop
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=sell*
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=buy*
// @include     http://www.thepikaclub.co.uk/adopt/trainercard.php?trainer=*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       none
// ==/UserScript==

 waitForKeyElements (
 "div.dolls"           //also tried #dolls
, showdexno
);

function showdexno (jNode) {
var imgs = document.getElementsByTagName('img');     

for (var i = imgs.length - 1; i >= 0; i--) {
  if (imgs[i].src.indexOf('overworld') > -1) {
     var textNode = document.createElement('b');

var numtext=imgs[i].src.match(/\d+/g)

  textNode.innerHTML = numtext;    
  imgs[i].parentNode.appendChild(textNode, imgs[i]);     
 }
} 
}

我可能只是没有使用正确的语法或其他东西，但我完全迷路了。

我正在 this page 上测试脚本，它需要在 Pokédolls 选项卡上点击 Load Pokédolls 按钮时触发。

您无需登录即可查看该目标页面。

我假设在完成这项工作后，我会把所有内容都放入 if 语句中:

 If location is trainer card wait for tab
 else just run the code

那么，我做错了什么？我如何为此使用 waitForKeyElements？还是有别的办法？

预计到达时间:还有一个问题......在一页上，这显示了图片旁边的数字，这是完美的 - 但是 - 在其他页面上，图片下方有文本，它将它添加到现有文本中。我如何让它每次都紧挨着图片？

Answer 1

好吧，我想我明白你想做什么。但首先，问题代码有两个大问题:

1. 该脚本使用 jQuery，但 the target page还使用 jQuery。所以，当脚本运行in @grant none mode, either the script will crash, or the page will crash, or both .默认为 @grant none 是首席 GM 开发人员的一个巨大错误，即使您不使用 jQuery，您也最好避免使用该模式。否则，您的脚本会崩溃，这只是 future 会发生什么变化的问题。
2. 修正: waitForKeyElements 被传递了一个名为 showdexno 的回调函数，但是脚本中没有定义 showdexno! (或在我检查过的页面上。)

waitForKeyElements() 通过查找与选择器匹配的元素然后将这些元素(一次一个)提供给回调函数来运行。这意味着回调中很少需要像 getElementsByTagName 这样的东西。

例如，如果您想像这样对一堆图像进行操作:

你would determine the HTML structure ，注意任何 id 或 class 属性。在这种情况下，它看起来像:

<div id="dolls">
  <center>
    <table>
      <tr>
        <td>
          <img class="attached" title="Quantity = 5" src="http://www.thepikaclub.co.uk/dex/images/icon/overworld/1.png">
        </td>
        <td>
          <img class="attached" title="Quantity = 18" src="http://www.thepikaclub.co.uk/dex/images/icon/overworld/2.png">
        </td>
... ...

而且您显然只需要那些在 src 中具有 overworld 的图像。

因此，选择 一个好的 CSS/jQuery 选择器可能是 #dolls td > img.attached[src*='overworld']。

传递给您的 waitForKeyElements 回调的 jNode 将是图像本身。图像一次传入一个。

将它们放在一起，附加 png 文件编号的脚本如下:

// ==UserScript==
// @name        Dex# of Pokedolls
// @namespace   http://trueidiocy.us
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=collection
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=giveaway
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=regional
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=shop
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=sell*
// @include     http://www.thepikaclub.co.uk/adopt/dolls.php?action=local&market=buy*
// @include     http://www.thepikaclub.co.uk/adopt/trainercard.php?trainer=*
// @version     1
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    "#dolls td > img.attached[src*='overworld']", 
    appendImageNumber
);

function appendImageNumber (jNode) {
    var numtext = jNode.attr ("src").match (/\d+/g);

    jNode.after ('<b>' + numtext + '</b>');
}

---

如果您想要更多(¿全部？)图像，请删除 .attached。

引用:

• jQuery selectors
• jQuery .after()