2016-04-24 80 views
0

我的網站上,我有一個JQuery的自動完成。自動完成功能工作正常。我從查詢中提取數據並以我想要的方式進行存儲。JQuery的圖像錯誤處理

這都可以看出here。 (源代碼可以看到,Enjin使得它醜陋,但它的存在。)

目前,返回列表格式來顯示畫面,如果一個存在,一個佔位符,如果一個沒有。

return $("<li>").append("<a>" + 
     '<img class="imgThumb" onError="this.src=\'http://files.enjin.com/450575/file_storage/scripts/crScripts/images/placeholder.jpg\';" src="http://census.daybreakgames.com/files/dcuo/images/character/paperdoll/' + item.desc.character_id + '" style="float:left; margin-right: 6px; max-height: 50px;width: auto;">' + '<span style="display:table-cell; vertical-align:middle; height:50px;">' + item.value + "<br>CR: " + item.desc.combat_rating + " " + item.desc.world.name + '</span>' + "</a>").appendTo(ul); 
    } 

在頁面中央的空白處是一個區域,我想使圖像從返回列表中變大。不過,我似乎在這裏遇到了麻煩。這點在加載HTML是:

<img id="crCharImage" src="" class="ui-state-default" alt="" /> 

如自動完成的jQuery代碼選擇功能的一部分,我有:

$("#crCharImage").error(function() {$("#crCharImage").attr("src", "http://files.enjin.com/450575/file_storage/scripts/crScripts/images/placeholder_large.png");}).attr("src", "http://census.daybreakgames.com/files/dcuo/images/character/paperdoll/" + ui.item.desc.character_id); 

在該圖像中存在的字符,該代碼完美的作品。圖像顯示,在世界上都是正確的。 (可以通過在TREX輸入到查找字符可以看出:輸入)上的字符在沒有圖像,而不是通過使用onerror函數去,它只是顯示的不是我的佔位符損壞的圖片(通過對農業鍵入如被看見輸入框。請注意,在下拉列表中顯示的標誌......這是預留的較小版本。)

我使用的.error不正確?或者有另一種方法來覆蓋這個問題?

編輯:根據回覆,我回過頭來看看附加函數以及jQuery的內置函數。我找到了.html,並能夠利用它來做我想做的事。我不知道爲什麼我最初不能開始工作,但對那些暗示再次看到它的人表示感謝。

+0

你使用jQuery,你認爲這是內聯的事件是個好主意生成元素上的處理程序?考慮:'$( '')。在(..您的代碼在這裏..)appendTo(yourLink)' – zzzzBov

回答

-1

我想你應該在onError的處理函數中使用轉義字符,只是刪除在onError的處理功能的「\」,改變最前一頁代碼塊這樣的:

return $("<li>").append("<a>" + 
    '<img class="imgThumb" onerror="this.src='http://files.enjin.com/450575/file_storage/scripts/crScripts/images/placeholder.jpg';" src="http://census.daybreakgames.com/files/dcuo/images/character/paperdoll/' + item.desc.character_id + '" style="float:left; margin-right: 6px; max-height: 50px;width: auto;">' + '<span style="display:table-cell; vertical-align:middle; height:50px;">' + item.value + "<br>CR: " + item.desc.combat_rating + " " + item.desc.world.name + '</span>' + "</a>").appendTo(ul); 
} 

希望這可以幫助

順便說一下,雖然「的onError」的作品,但我認爲正確的關鍵字是「的onerror」的錯誤回調^ _^

+0

感謝您的建議。第一個代碼塊,你引用的那個,工作正常。下拉菜單中沒有錯誤。問題在於試圖讓問題中的最終代碼塊起作用。 –

+0

最終代碼塊在我的Edge和Chrome中使用jquery 1.12.1正常工作。由於第一個代碼塊中的'onerror'事件正常工作,爲什麼不用這種方式呢? – baiyangcao