如何在選擇圖像後使用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按鈕被點擊的Pokédolls標籤。

您可以查看該目標頁面而無需登錄。

我假設後，我得到這個工作，我只想拋開一切到一個if語句：

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

那麼，我究竟做錯了什麼？如何爲此使用waitForKeyElements？還是有另一種方式？

ETA：還有一個問題...在一個頁面上顯示的圖片旁邊的數字是完美的 - 但是 - 在其他頁面上的圖像下面有文本，它會將其添加到現有文本中。每次我如何使它在圖片旁邊？

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是通用汽車開發人員的一個巨大錯誤，即使您沒有使用jQuery，您也應該避免使用這種模式。否則，腳本將崩潰，這只是未來更改的一個問題。
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> 
... ... 

你顯然希望只有那些在srcoverworld這些圖像。

所以，一個很好的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()