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

标签 javascript jquery html

我正在尝试用 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());

关于javascript - 改变js中的数据百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43845884/

相关文章:

javascript - 如何刷新具有相同选择的页面? ( Jade /HTML)

java - 将 Alfresco 与我的自定义前端集成

javascript - 更改所选项目的文本以包括其父 optgroup

html - 当最后一个单词后跟一个连字符时,对齐单行会在 IE 中的最后一个单词之前换行

javascript - 高效的调用堆栈中断技术

javascript - jquery 数据表默认排序

javascript - 如何使用 JQuery 根据复选框的值默认显示或隐藏?

html - 跨屏幕尺寸对齐图像和 div

javascript - 获取json ajax php表单进行远程工作

javascript - 等待 Promise.all 继续执行