jQuery maphilight設置區域始終點擊

Question

我使用David Lynch的jQuery maphilight（http://davidlynch.org/projects/maphilight/docs/）來突出顯示圖像上的圖像地圖區域。特別是，這個演示（http://davidlynch.org/projects/maphilight/docs/demo_features.html）展示瞭如何設置data-maphilight =「{'alwaysOn：true'}」，以便給定的地圖區域「始終打開」。

我想根據點擊的項目設置「永遠在線」。所以，我想這一點：

$(this).attr('data-maphilight', '{\'alwaysOn\':true}'); 

用Firebug，我可以看到屬性被添加到被點擊時，我的元素，例如：

<area data-county="Susquehanna" href="#" coords="589,62,590,117,518,118,511,62" shape="poly" data-maphilight="{'alwaysOn':true}"> 

然而，該元素不是住高亮。

如果我手動（在HTML標記）設置始終開啓，像這樣：

<area shape="poly" coords="447,193,442,225,453,222,467,226,467,235,472,235,475,242,486,242,489,251,448,268,420,276,433,257,434,246,438,235,428,220,433,206,430,194,438,191" href="#" data-county="Northumberland" data-maphilight='{"alwaysOn":true}'> 

...它的工作。這是混合單引號還是雙引號？當我使用jQuery「attr」語句時，它會自動使用雙引號，所以我必須將它們反轉。或者，這是一個問題，只是設置該屬性不會導致jQuery插件更新？

希望任何建議，因爲我試圖修改此腳本來做我想做的事情。

謝謝！

Answer 1

這是混合單引號還是雙引號？

當您設置數據屬性。 jQuery試圖將該字符串解析爲JSON，但前提是它是有效的JSON。因此，data-maphilight='{"alwaysOn":true}'包含有效的JSON，而data-maphilight="{'alwaysOn':true}"。請注意，用於分隔字符串的單引號會生成錯誤的JSON。

這是一個問題，只是設置該屬性不會導致jQuery插件更新？

那麼，設置數據屬性與設置數據對象不同。

// Changes the data-maphilight attribute to the string '{\'alwaysOn\':true}' 
$(this).attr('data-maphilight', '{\'alwaysOn\':true}'); 
// Sets the internal data object to {'alwaysOn': true}. This is a javascript object, not JSON. 
$(this).data('maphilight', {'alwaysOn': true}); 

因此，一旦創建對象，如果要修改它，你需要使用.data不.attr。

更改不會導致更新的屬性的問題可能是因爲我們需要一種方法來通知插件發生了更改。我在示例代碼中看到，此插件使用.trigger('alwaysOn.maphilight')來引發此通知。然後，在充滿變化的說法應該是這樣的：

$(this).data('maphilight', {'alwaysOn': true}).trigger('alwaysOn.maphilight'); 

注意，這樣做分配將取代目前的maphilight數據對象{'alwaysOn': true}取代了以前的一個。