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

我写了一个脚本,将图像源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：还有一个问题…在一页上,这是完美的图片旁边显示的数字-但是-在图像下有文字的其他页面上,它会将其添加到现有文字中.每次如何使它紧贴图片？

解决方法:

好吧,我想我明白了您要做什么.但是首先,问题代码有两个大问题：

>该脚本使用jQuery,但是the target page也使用jQuery.因此,当脚本运行in @grant none mode, either the script will crash, or the page will crash, or both时,默认@@ grant都不是主要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>
... ...

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

因此,一个不错的CSS / jQuery选择器可能是#dollstd> 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>');
}

如果您想要更多(全部)图像,请消除附加的..

参考：

> jQuery selectors
> jQuery .after()

标签：ajax,greasemonkey,javascript,jquery
来源： https://codeday.me/bug/20191030/1967101.html