IT虾米网

javascript之改变js中的数据百分比

over140 2024年08月28日 程序员 348 0

我正在尝试用 JS 创建一个程序,以便在单击 map 的某个区域时更改一些数据百分比。基本上我使用 jqvmap 作为 map 和进度条来显示用户单击的每个区域的一些信息。 这就是我正在处理的内容:

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 语句工作正常,每次我单击一个区域时,它都会显示我单击的区域,但第二个 if 语句 ( ifregion = 'United Kingdom').....“即使在以下情况下也不起作用看起来是正确的。 你有什么建议给我吗? 谢谢:)

请您参考如下方法:

HTML:

<div id="chart" class="chart-circle" data-percent="100"></div> 

JavaScript:

var value = 50; 
$("#chart").attr("data-percent", value.toString()); 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!