Question

我在网站上实施了里程表：http://github.hubspot.com/odometer/docs/welcome/

里程表的值需要有一个默认值100（这是六个指定数字的总和）。

我有6个链接。每个链接都有一个数据属性，当您将鼠标悬停在它们上时，里程表需要更改以显示指定的值。退出悬停时，里程表需要返回默认值。

jQuery真的很新，它取得了巨大的成功，我甚至让里程表首先工作，但真的很难进一步发展。任何帮助或建议将不胜感激！

设置默认值的当前jQuery代码是：

setTimeout(function(){
  odometer.innerHTML = 100;
}, 0.100);

HTML是：

<div class="wrap">
   <div id="odometer" class="odometer count">100</div>
</div>

<div class="sectors"> 
   <ul>
      <li data-value="10" class="n_1"><a href="#" title="">Item 1</a></li>
      <li data-value="25" class="n_2"><a href="#" title="">Item 2</a></li>
      <li data-value="12" class="n_3"><a href="#" title="">Item 3</a></li>
      <li data-value="13" class="n_4"><a href="#" title="">Item 4</a></li>
      <li data-value="22" class="n_5"><a href="#" title="">Item 5</a></li>
      <li data-value="18" class="n_6"><a href="#" title="">Item 6</a></li>
   </ul>
</div>

Answer 1

你可以从这个例子开始：

<强> HTML ：

<div id="odometer" class="odometer">123</div>
<a href="" data-id=134>One</a>    
<a href="" data-id=332>Two</a>    
<a href="" data-id=132>Three</a>    
<a href="" data-id=344>Four</a>    
<a href="" data-id=345>Five</a>

<强>的jQuery ：

var def = 0;
$(function () {
    $('a').hover(function () {
        def = $(this).attr('data-id');
        odometer.innerHTML = 456;
    }, function () {
        odometer.innerHTML = parseInt(def);
    });
});

演示：http://jsfiddle.net/lotusgodkk/GCu2D/317/

关于jQuery Hover ：http://api.jquery.com/hover/

如何在悬停时更改里程表值

1 个答案: