Question

好的我得到了这个HTML代码：

<div class="skillbar clearfix " data-percent="20%">
  <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
  <div class="skillbar-bar" style="background: #e67e22;"></div>
  <div class="skill-bar-percent">20%</div>
</div>
<!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="25%">
  <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
  <div class="skillbar-bar" style="background: #3498db;"></div>
  <div class="skill-bar-percent">25%</div>
</div>
<!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="50%">
  <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
  <div class="skillbar-bar" style="background: #2c3e50;"></div>
  <div class="skill-bar-percent">50%</div>
</div>
<!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="40%">
  <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
  <div class="skillbar-bar" style="background: #5a68a5;"></div>
  <div class="skill-bar-percent">40%</div>
</div>
<!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
  <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
  <div class="skillbar-bar" style="background: #525252;"></div>
  <div class="skill-bar-percent">75%</div>
</div>
<!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="100%">
  <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
  <div class="skillbar-bar" style="background: #2ecc71;"></div>
  <div class="skill-bar-percent">100%</div>
</div>
<!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="70%">
  <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
  <div class="skillbar-bar" style="background: #4288d0;"></div>
  <div class="skill-bar-percent">70%</div>
</div>
<!-- End Skill Bar -->

css one：

.skillbar {
  position: relative;
  display: block;
  margin-bottom: 15px;
  width: 100%;
  background: #eee;
  height: 35px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
}

.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  background: #6adcfa;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.skillbar-title span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 35px;
  line-height: 35px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.skillbar-bar {
  height: 35px;
  width: 0px;
  background: #6adcfa;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 11px;
  height: 35px;
  line-height: 35px;
  color: #ffffff;
  color: rgba(0, 0, 0, 0.4);
}

和js one：

jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 6000);
  });
});

技能栏没有动画/不填充。我试着在html中调用js文件，如下所示：

<script src="skills.js" type="text/javascript"></script>

我还试着这样做：

<script type="text/javascript">jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 6000);
  });
});</script>

但仍然无法工作..我没有想到为什么.. 顺便说一下，我是这方面的佼佼者所以请耐心等待我并试着解释我如何解决它的细节问题。谢谢大家，我希望我能克服这一点，因为我被困住了，我不知道该怎么办......或者我的代码出错了。

Answer 1

首先附加一个jquery库

<script src="your link to js file or CDN link"></script>

然后更改一些css以正确显示您的技能栏（当前没有准确显示）

Answer 2

您的代码确实有效，问题在于如何包含您的JavaScript。你有jQuery吗？如果没有，请尝试包含它的版本：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

我尝试使用第一个js剪切并且它有效（我告诉jsfiddle在幕后包含jquery）：https://jsfiddle.net/v21gak4q/

Answer 3

jQuery(document).ready(function() {
  jQuery('.skillbar').each(function() {
    jQuery(this).find('.skillbar-bar').animate({
      width: jQuery(this).attr('data-percent')
    }, 6000);
  });
});

技能栏jquery - 不起作用

3 个答案: