4

我编写了一个脚本，将包含在图像源 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]);     
 }
} 
}


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

我正在测试这个页面上的脚本，它需要在点击PokédollsLoad Pokédolls选项卡上的按钮时触发。

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

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

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

那么，我做错了什么？我该如何使用waitForKeyElements？还是有其他方法？

ETA：另一个问题...... 我如何让它每次都在图片旁边？

4

1 回答 1

6

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

  1. 该脚本使用 jQuery，但目标页面也使用 jQuery。因此，当脚本在@grant none模式下运行时，要么脚本崩溃，要么页面崩溃，或者两者兼而有之。默认设置@grant none是首席 GM 开发人员的一个巨大错误，即使您不使用 jQuery，您也应该避免使用该模式。否则，您的脚本将崩溃，这只是未来更改它的问题。
  2. 修正：waitForKeyElements传递了一个名为 的回调函数，但脚本showdexno中没有定义！showdexno（或在我检查的页面上。）


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

例如，如果你想对一堆这样的图像进行操作：

目标图像


您将确定 HTML 结构，注意任何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'].

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

综上所述，附加 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如果您想要更多（¿all？）图像，请消除。

参考：

于 2013-10-08T05:41:27.000 回答