Question

好的，所以我用jquery创建了这个条形图，我试图在我的网站上显示它。我在CodePen中对此进行了测试并且它有效，但是当我将代码复制到我的网站时它无效。

我链接到我的标题中的jquery库，我有： https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

现在我的问题是.bar没有显示和动画，但其他所有内容，如边框，标签和其他所有内容都不是图形。有人可以帮助我吗？

我的HTML如下：

<div id="chart">
          <ul id="skill">
            <li><span>Proficient</span></li>
            <li><span>Above Average</span></li>
            <li><span>Average</span></li>
            <li><span>Basic</span></li>
          </ul>

          <ul id="bars">
            <li><div data-height="120" class="bar"></div><span>Graphic Design</span></li>
            <li><div data-height="240" class="bar"></div><span>HTML 5</span></li>
            <li><div data-height="180" class="bar"></div><span>CSS / SASS</span></li>
            <li><div data-height="120" class="bar"></div><span>Javascript & JQuery</span></li>
            <li><div data-height="180" class="bar"></div><span>Content Management Systems (CMS)</span></li>
            <li><div data-height="120" class="bar"></div><span>PHP</span>
            </li>
            <li><div data-height="180" class="bar"></div><span>Videography</span>
            </li>
            <li><div data-height="120" class="bar"></div><span>Flash & ActionScript</span>
            </li>
            <li><div data-height="120" class="bar"></div><span>3-D Animation & Pritning</span>
            </li>
          </ul>
        </div>

SASS：

  #chart {
    width: 90%;
    height: 450px;
    margin: 30px auto;
    display: block;

    #skill {
      width: 10%; 
      height: 100%;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: right;

      li {
        text-align: center;
        list-style: none;
        height: 20px;
        border-bottom: 2px solid #c7c7c7;
        margin: 40px 0;

        span {
          color: #d2f9c2;
        }
      }
    }

    #bars {
      display: inline-block;
      width: auto;
      height: 300px;
      padding: 0;
      margin: 0 15px 0 0;
      float: right;
      border-bottom: 2px solid $background;

      li {
        display: table-cell;
        width: 100px;
        height: 300px;
        margin: 0;
        text-align: center;
        position: relative;

        .bar {
          display: block;
          width: 60px;
          margin-left: 15px;
          background: linear-gradient(#d2f9c2, #379f53);
          position: absolute;
          bottom: 0;
        }

        span {
          color: #eee;
          width: 202px;
          position: absolute;
          bottom: -7em;
          left: 1.5em;
          text-align: left;
          transform: rotate(40deg);
        }
      }
    }
  }

JQuery的：

$(document).ready(function() {
  $("#bars li .bar").each( function( key, bar ) {
    var height = $(this).data('height');

    $(this).animate({
      'height' : height 
    }, 1000);
  });
});

请帮帮忙？

Answer 1

我让这个工作。谢谢大家的反馈。我最终将JQuery放在代码的错误区域。

我的代码：

<?php /* Template Name: Experience Page */ ?>

<?php get_header(); ?>
<!--<div class="main">-->
    <div class="container">
        <div class="experience">
        </div>
    </div>

    <div class="graph">
        <div class="container">
            <div id="chart">
              <ul id="skill">
                <li><span>Proficient</span></li>
                <li><span>Above Average</span></li>
                <li><span>Average</span></li>
                <li><span>Basic</span></li>
              </ul>

              <ul id="bars">
                <li><div data-height="120" class="bar"></div><span>Graphic Design</span></li>
                <li><div data-height="240" class="bar"></div><span>HTML 5</span></li>
                <li><div data-height="180" class="bar"></div><span>CSS / SASS</span></li>
                <li><div data-height="120" class="bar"></div><span>Javascript & JQuery</span></li>
                <li><div data-height="180" class="bar"></div><span>Content Management Systems (CMS)</span></li>
                <li><div data-height="120" class="bar"></div><span>PHP</span>
                </li>
                <li><div data-height="180" class="bar"></div><span>Videography</span>
                </li>
                <li><div data-height="120" class="bar"></div><span>Flash & ActionScript</span>
                </li>
                <li><div data-height="120" class="bar"></div><span>3-D Animation & Pritning</span>
                </li>
              </ul>
            </div>
        </div>
    </div>

    <div class="projects">
        <?php dynamic_sidebar( 'projects_position' ); ?>
    </div>
</div> <!--.main-->
<?php get_footer(); ?>

<script type="text/javascript">
    $(document).ready(function() {
      $("#bars li .bar").each( function( key, bar ) {
        var height = $(this).data('height');

        $(this).animate({
          'height' : height 
        }, 1000);
      });
    });
</script>

SASS：

.experience {


height: 350px;
}

.graph {
  overflow: hidden;
  background: $darkgrey;

  #chart {
    width: 90%;
    height: 450px;
    margin: 30px auto;
    display: block;

    #skill {
      width: 10%; 
      height: 100%;
      margin: 0;
      padding: 0;
      display: inline-block;
      float: right;

      li {
        text-align: center;
        list-style: none;
        height: 20px;
        border-bottom: 2px solid #c7c7c7;
        margin: 40px 0;

        span {
          color: #d2f9c2;
          font-size: 1.2em;
          font-weight: 600;
        }
      }
    }

    #bars {
      display: inline-block;
      width: auto;
      height: 300px;
      padding: 0;
      border-bottom: 2px solid $background;

      li {
        display: table-cell;
        width: 100px;
        height: 300px;
        margin: 0;
        text-align: center;
        position: relative;

        .bar {
          display: block;
          width: 60px;
          margin-left: 15px;
          background: linear-gradient(#d2f9c2, #379f53);
          position: absolute;
          bottom: 0;
        }

        span {
          color: #eee;
          width: 202px;
          position: absolute;
          bottom: -7em;
          left: 1.5em;
          text-align: left;
          transform: rotate(40deg);
        }
      }
    }
  }
}

创建Jquery条形图

1 个答案: