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标签上点击加载Pokédolls按钮时触发。

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

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

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

那么，我做错了什么？如何使用waitForKeyElements进行此操作？或者还有另一种方式吗？

ETA：还有一个问题......在一个页面上，这显示了图片旁边的数字是完美的 - 但是 - 在其他页面上有图像的文本，它将它添加到现有文本中。如何让它每次都在图片旁边？

Answer 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，你也应该明智地避开这种模式。否则，您的脚本将崩溃，这只是未来发生变化的问题。
修正： ~~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>
... ...

而且你显然只想要那些在overworld中有src的图片。

因此，选择的好的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。

参考：

如何在选择图像后使用waitForKeyElements显示信息？

1 个答案: