Databases
StackOverflow2013
Postsdbo
POHidden DIV and id naming structure
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHidden DIV and id naming structure
    text
    copied!<p>I have a script that displays one div at a time while hiding the previous shown div. When a button is clicked, the counter variable increases by one and the naming of the div id's are "step1", "step2", "step3", etc. Here is the script:</p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; var counter = 0; $('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing' $(function() { $('#toggle_value').click(function() { $('div','#hiddendiv') // to stop current animations - clicking really fast could originally // cause more than one div to show .stop() // hide all divs in the container .hide() // filter to only the div in questio .filter( function() { return this.id.match('step' + counter); }) // show the div .show() // prevent default anchor click event return false; }); }); &lt;/script&gt; </code></pre> <p>This is where the variable is being incremented when clicked:</p> <pre><code>&lt;div class="toggle_button"&gt; &lt;a href="#" onClick="counter = counter + 1" id="toggle_value"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Here is my hidden div:</p> <pre><code>&lt;div id='hiddendiv'&gt; &lt;div id="step1" class="display"&gt; &lt;p&gt;step 1 text&lt;/p&gt; &lt;/div&gt; &lt;div id ="step2" class="display"&gt; &lt;p&gt;step 2 text&lt;/p&gt; &lt;/div&gt; &lt;div id="step3" class="display"&gt; &lt;p&gt;step 3 text&lt;/p&gt; &lt;/div&gt; &lt;div id ="step4" class="display"&gt; &lt;p&gt;step 4 text&lt;/p&gt; &lt;/div&gt; &lt;div id="step5" class="display"&gt; &lt;p&gt;step 5 text&lt;/p&gt; &lt;/div&gt; &lt;div id ="step6" class="display"&gt; &lt;p&gt;step 6 text&lt;/p&gt; &lt;/div&gt; &lt;div id="step7" class="display"&gt; &lt;p&gt;step 7 text&lt;/p&gt; &lt;/div&gt; &lt;div id ="step8" class="display"&gt; &lt;p&gt;step 8 text&lt;/p&gt; &lt;/div&gt; &lt;div id="step9" class="display"&gt; &lt;p&gt;step 9 text&lt;/p&gt; &lt;/div&gt; &lt;div id ="step10" class="display"&gt; &lt;p&gt;step 10 text&lt;/p&gt; &lt;/div&gt; &lt;div id="step11" class="display"&gt; &lt;p&gt;step 11 text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The script works wonderfully and does what it needs, until id's with double digits and ending with a "0" (10, 20, 30, 40, etc...). For example: when the counter = 1, div id step1 and div id step10 are being shown on the page. When the counter = 10, only div id step10 is being shown. Div id step11 is shown at the appropriate time so I have narrowed it down to double digits ending in 0. I will never have more than 100 steps so only ending double digits or less are being used.</p> <p>Are 0's at the end of a div id being ignored and being seen step1 and step10? I know you can't use a numeric value at the beginning of a id but it also states any number of [0-9] after the alphabetic character.</p> <p>Thank you </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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