gpt4 book ai didi

javascript - JqvMap onRegionClick (bootstrap) PopOver 仅触发点击两次

转载 作者:行者123 更新时间:2023-11-28 08:08:36 25 4
gpt4 key购买 nike

我正在使用 JqvMap,我想单击一个区域,这将提示一个以国家/地区名称作为标题的( Bootstrap )弹出窗口,内容应该是一些 html 链接。这是我的代码:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: 'true',
onRegionClick: function(element, code, region) {
$(".popover-title").html(region);
jQuery('.jvectormap-region').popover({
placement: 'top',
container: '#vmap',
content: '<a href="#">page 1</a></br><a href="#">page 2</a></br><a href="#">page 3</a></br><a href="#">page 4</a></br>',
trigger: 'click',
html: 'true',
title: ' '
});
},
onRegionOver: function (event, code, region) {
document.body.style.cursor = "pointer";
},
onRegionOut: function (element, code, region) {
document.body.style.cursor = "default";
$('.jvectormap-region').popover('destroy');
// $('#vmap').vectorMap('deselect', code);
}
});
});
</script>

我目前的问题是我需要在 map 上单击两次才能显示弹出窗口。我读到它可能是因为它没有初始化,但我似乎无法初始化它(在哪里?如何?)!

有人可以帮我解决这些问题吗?我似乎无法弄清楚问题出在哪里..

最佳答案

所以我有点修复它(可能以一种令人讨厌的方式,但它确实有效)。希望它对其他人有帮助。

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: true,
});
runPopOver();
});
</script>

<script type="text/javascript">
function runPopOver() {
var currentRegion;
jQuery('#vmap').bind('regionMouseOver.jqvmap',
function(event, code, region) {
document.body.style.cursor = "pointer";
currentRegion = region;
}
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
function(event, code, region) {
document.body.style.cursor = "default";
}
);
jQuery('#vmap').bind('regionClick.jqvmap',
function(event, code, region) {
if ($('#vmap [id^="popover"]').length > 1) {
$('#vmap [id^="popover"]').first().remove();
}
var snapshot_url = "http://www.business-anti-corruption.com/country-profiles/europe-central-asia/" + region + "/snapshot.aspx";

$(".popover-title").html(region);
$(".popover-content").html('<a href=' + snapshot_url + ' target="_blank">Snapshot</a></br><a href="#">page 2</a></br><a href="#">page 3</a></br><a href="#">page 4</a></br>');
}
);

jQuery('.jvectormap-region').popover({
placement: 'left',
container: '#vmap',
html: 'true',
title: ' '
});
}
</script>

所以基本上,当我单击一个区域时,如果有超过 1 个弹出窗口(甚至要打开),我会得到所有弹出窗口的列表 (2),获取第一个并将其从 DOM 中删除 (.first() .remove())。

关于javascript - JqvMap onRegionClick (bootstrap) PopOver 仅触发点击两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24529467/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com