我正在尝试在JS中创建一个程序,以便在单击地图区域时更改一些数据百分比。基本上,我使用jqvmap作为地图和一个进度条来显示用户单击的每个区域的一些信息。我正在使用的:
.HTML
<h1>Edificable surface</h1>
<div class="skillbar clearfix" data-percent="0%">
<div class="skillbar-title" style="background: #27ae60;"><span>Job</span></div>
<div class="skillbar-bar" style="background: #2ecc71;"></div>
<div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->
JavaScript
jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
});
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'europe_en',
enableZoom: false,
showTooltip: true,
onRegionClick: function (element, code, region) {
if (!touch_detect()) {
// we're not on a mobile device, handle the click
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
document.getElementById('indi').innerHTML = 'You clicked "' + region + '".';
}
if (region == 'United Kingdom') {
document.getElementByClassName('skillbar clearfix').setAttribute('data-percent', '50%');
} else {
document.getElementByClassName('skillbar clearfix').setAttribute('data-percent', '0');
}
},
onRegionOver: function (element, code, region) {
if (touch_detect()) {
/// we're not on a mobile device, handle the click
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
document.getElementById('indi').innerHTML = 'You clicked "' + region + '".';
}
},
});
});
第一个 if 语句工作正常,每次我单击一个区域时,它都会显示我单击的区域,但第二个(如果区域 = '英国'(....."即使看起来正确也不起作用。你对我有什么建议吗?谢谢:)
HTML:
<div id="chart" class="chart-circle" data-percent="100"></div>
JavaScript:
var value = 50;
$("#chart").attr("data-percent", value.toString());