Question

我使用David Lynch的jQuery maphilight（http://davidlynch.org/projects/maphilight/docs/）来突出显示图像上的图像地图区域。特别是，此演示（http://davidlynch.org/projects/maphilight/docs/demo_features.html）显示了如何设置数据-maphilight =＆＃34; {＆＃39; alwaysOn：true＆＃39;}＆＃34;因此，给定的地图区域始终在＆＃34;。

我想设置＆＃34;永远在＆＃34;基于单击的项目。所以我尝试了这个：

$(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标记中）设置alwaysOn，就像这样：

<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＆＃34; attr＆＃34;声明，它会自动使用双引号，所以我不得不反转它们。或者，这是一个问题，只是设置该属性不会导致jQuery插件更新？

当我尝试修改此脚本以执行我想要的操作时，我将不胜感激。

谢谢！

Answer 1

这是单引号还是双引号的混合？

设置数据属性时。 jQuery尝试将字符串解析为JSON，但前提是它是有效的JSON。因此，data-maphilight='{"alwaysOn":true}'包含data-maphilight="{'alwaysOn':true}"时的有效JSON。请注意，分隔字符串的单引号会生成错误的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}替换之前的数据对象。

jQuery maphilight将区域设置为alwaysOn by click

1 个答案: