Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Instead of selecting wheels using IDs, which must be unique, give each wheel a class of "wheel" so that you can select all of them at once:</p> <pre><code>&lt;path id="wheel10" class="wheel" .... /&gt; &lt;path id="wheel9" class="wheel" ... /&gt; etc. </code></pre> <p>Then, you can select all "wheels" using jQuery and refer to the one that's hovered using <code>$(this)</code> in your functions:</p> <pre><code>$(function() { $("path.wheel").hover(grow1, shrink1); }); function grow1() { $(this).animate({'stroke-width':'100'},300); } function shrink1() { $(this).animate({'stroke-width':'55'},300); } </code></pre> <p>Fiddle: <a href="http://jsfiddle.net/F4Yjj/1/" rel="nofollow">http://jsfiddle.net/F4Yjj/1/</a></p> <p>EDIT: Using this method, you don't need "evt" in your functions. <a href="http://jsfiddle.net/F4Yjj/3/" rel="nofollow">http://jsfiddle.net/F4Yjj/3/</a></p> <p>EDIT: To also display another element. Given that you have a different physical element for each wheel (as shown in your updated HTML), you can determine the ID of the hovered wheel and select the other element by its ID:</p> <pre><code>function grow1() { var id=$(this).prop('id').split('_'); $(this).animate({'stroke-width':'100'},300); $("#circlecontainer_"+id[1]).fadeIn(300); } function shrink1() { var id=$(this).prop('id').split('_'); $(this).animate({'stroke-width':'55'},300); $("#circlecontainer_"+id[1]).fadeOut(100); } </code></pre> <p>This fiddle has circles for wheel1 and wheel2: <a href="http://jsfiddle.net/F4Yjj/7/" rel="nofollow">http://jsfiddle.net/F4Yjj/7/</a></p> <p>You could also condense this by using one center circle for all wheels. Upon hover, update the circle's text with the proper percentages, colors, etc.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload