Скрытая DIV и структура именования id

Question

У меня есть скрипт, который отображает один div за раз, скрывая предыдущий показанный div. Когда кнопка нажата, увеличивается переменная счетчика на единицу и именование DIV идентификаторами являются «step1», «step2», «step3» и т.д. Вот сценарий:

<script language="javascript" type="text/javascript"> 
     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; 
       }); 
     }); 
</script> 

Это где переменная инкрементируется при нажатии:

<div class="toggle_button"> 
     <a href="#" onClick="counter = counter + 1" id="toggle_value"></a> 
</div> 

Вот мой скрытый ДИВ:

<div id='hiddendiv'> 
     <div id="step1" class="display"> 
       <p>step 1 text</p> 
     </div> 
     <div id ="step2" class="display"> 
       <p>step 2 text</p> 
     </div> 
     <div id="step3" class="display"> 
       <p>step 3 text</p> 
     </div> 
     <div id ="step4" class="display"> 
       <p>step 4 text</p> 
     </div>  
     <div id="step5" class="display"> 
       <p>step 5 text</p> 
     </div> 
     <div id ="step6" class="display"> 
       <p>step 6 text</p> 
     </div>  
     <div id="step7" class="display"> 
       <p>step 7 text</p> 
     </div> 
     <div id ="step8" class="display"> 
       <p>step 8 text</p> 
     </div>  
     <div id="step9" class="display"> 
       <p>step 9 text</p> 
     </div> 
     <div id ="step10" class="display"> 
       <p>step 10 text</p> 
     </div>  
     <div id="step11" class="display"> 
       <p>step 11 text</p> 
     </div> 
</div> 

скрипт прекрасно работает и не делает то, что ему нужно, пока идентификаторами с двузначными цифрами и заканчивая «0» (10, 20, 30, 40 и т. Д.). Например: когда на странице отображается счетчик = 1, на странице отображаются идентификатор div id и div id step10. Когда счетчик = 10, отображается только шаг div id10. Div id step11 отображается в соответствующее время, поэтому я сузил его до двухзначных цифр, заканчивающихся на 0. У меня никогда не будет более 100 шагов, поэтому используются только двойные цифры или меньше.

Есть 0 в конце id div игнорируются и видятся step1 и step10? Я знаю, что вы не можете использовать числовое значение в начале идентификатора, но также указывается любое число [0-9] после буквенного символа.

Спасибо

Answer 1

Вместо использования матча(), просто проверить равенство:

// filter to only the div in question 
.filter(function() { return this.id == 'step' + counter; }) 

Пример: http://jsfiddle.net/TAQZQ/

match() предназначен для поиска строки с регулярным выражения и возвращения матчей.

Answer 2

Не используйте this.id.match, так как он будет пытаться соответствовать в любом месте ID. Вместо этого попробуйте this.id = следующим образом:

.filter(function() { return this.id == 'step' + counter; })