jQuery добавление класса к нескольким спискам с тем же классом

Question

У меня есть несколько списков с тем же именем класса для меню, и по какой-то причине, когда я нажимаю на один из них, он не меняется для всех меню. Я что-то упускаю?

Вот JS, извините за длинные несоответствующие коды:

/***** START SLIDER ****/ 
$(function() { 
/* 
number of fieldsets 
*/  
var fieldsetCount = $('#formElem').children().length;    
/* 
current position of fieldset/navigation-form link  
*/  
var current  = 1;     
/* 
sum and save the widths of each one of the fieldsets   
set the final sum as the total width of the steps element 
*/ 
var stepsWidth = 0;   
var widths  = new Array();  
$('#steps .step').each(function(i){   
var $step  = $(this);   
widths[i]  = stepsWidth;   
stepsWidth  += $step.width();  });  
$('#steps').width(stepsWidth);    
/*  
to avoid problems in IE, focus the first input of the form 
*/  
$('#formElem').children(':first').find(':input:first').focus(); 
/*  
show the navigation-form bar  
*/  
$('.navigation-form').show();    
/* 
when clicking on a navigation-form link   
the form slides to the corresponding fieldset 
*/  
$('.navigation-form a').bind('click',function(e){   
var $this = $(this);   
var prev = current;   
$this.closest('ul').find('li').removeClass('selected');   
$this.parent().addClass('selected'); 
var sameClass = $this.parent().attr('class'); 
$('.'+sameClass).find('li').removeClass('selected'); 
sameClass.replace('selected',''); 
$('.'+sameClass).parents('li').addClass('selected'); 
/*  
we store the position of the link   
in the current variable   
*/   
current = $this.parent().index() + 1;   
/*  
animate/slide to the next or to the corresponding   
fieldset. The order of the links in the navigation-form   
is the order of the fieldsets.   
Also, after sliding, we trigger the focus on the first  
input element of the new fieldset   
If we clicked on the last link (confirmation), then we validate   
all the fieldsets, otherwise we validate the previous one   
before the form slided  
*/   
$('#steps').stop().animate({    
marginLeft: + ((widths[current-1]+127*current-127)*-1) + 'px'  
},500,function(){ 
if(current == fieldsetCount)    
validateSteps();   
else     
validateStep(prev);   
$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();  
});  
e.preventDefault(); 
});   
/* 
clicking on the tab (on the last input of each fieldset), makes the form  
slide to the next step  */ 
$('#formElem > fieldset').each(function(){ 
var $fieldset = $(this);   
$fieldset.children(':last').find(':input').keydown(function(e){   
if (e.which == 9){    
$('.navigation-form li:nth-child(' + (parseInt(current)+1) + ') a').click();  
/* force the blur for validation */     $(this).blur();  
e.preventDefault();  
} 
}); 
});  

}); 

/***** END SLIDER ****/  

и файлы для HTML

<div id="dialog" class="dialog"></div> 
    <div id="content-form"> 
     <div id="wrapper-form"> 
     <?php if(isset($_POST['submit'])){ 

      .... 

      ?> 
      <div id="steps"> 
       <form> 
        <fieldset class="step"> 
        <div class="para"> 
        You have successfully submitted the form 
        </div> 
        </fieldset> 
       </form> 
      </div> 


     <?php } else { ?> 
      <div id="navigation-form" style="display:none;" class="navigation-form"> 
       <ul> 
        <li class="selected step1"> 
         <a href="#">Start</a> 
        </li> 
        <li class="step2"> 
         <a href="#">Services</a> 
        </li> 
        <li class="step3"> 
         <a id="step3a" href="#">Equipment</a> 
        </li> 
        <li class="step4"> 
         <a href="#">Confirm</a> 
        </li> 

       </ul> 


      </div> 
      <div id="steps"> 
       <form id="formElem" name="formElem" action="http://170.75.154.211/~atozmovi/moving-cost-calculator/" method="post"> 

        <fieldset class="step"> 
         <legend>Start</legend> 
         <div class="para"> 
          <label for="service-type">Type of Service</label> 
          <select name="service-type" id="service-type"> 
           <option value="" disabled selected value="select">Select Service</option> 
           <option value="full">Full Service</option> 
           <option value="labor">Labor Only</option> 
           <option value="junk">Junk Removal</option> 
          </select> 
         </div> 
         <div class="para"> 
          <label for="num-movers">Number of Movers</label> 
          <select name="num-movers" id="num-movers" disabled> 
           <option value="select" disabled selected>Select Service</option> 
           <option value="1">1</option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
          </select> 
         </div> 
         <div style="clear:both;height:20px;"></div> 
       <div class="estimated"> 
       <span class="price" id="price">Estimated Price: Need More Information</span> 
       <br /><span class="estimated-time" id="estimated-time">Estimated Time: Need More Information</span> 
       </div> 
       <div style="clear:both;"></div> 
         <div id="navigation-form" class="navigation-form next-button"> 

       <ul> 
        <li style="display:none;"> 
         <a href="#">Next</a> 
        </li> 
        <li class="step2"> 
         <a href="#">Next</a> 
        </li> 

       </ul> 
       </div> 
        </fieldset> 
        <fieldset class="step"> 
         <legend>Services</legend> 
         <div class="para" id="truck"> 
          <label for="truck-size">Truck Size</label> 
          <select name="truck-size" id="truck-size"> 
           <option value="select" disabled selected>Select Truck Size</option> 
           <option value="10">10'</option> 
           <option value="14">14'</option> 
           <option value="17">17'</option> 
           <option value="20">20'</option> 
           <option value="26">26'</option> 
          </select> 
         </div> 
         <div class="para" id="hours"> 
          <label for="num-hours">Number of Hours (Minimum 2)</label> 
          <select name="num-hours" id="num-hours"> 
           <option value="select" disabled selected>Select Estimated Hours</option> 
           <option value="2">2 Hours</option> 
           <option value="3">3 Hours</option> 
           <option value="4">4 Hours</option> 
           <option value="5">5 Hours</option> 
           <option value="6">6 Hours</option> 
           <option value="call">Call For Other Hours</option> 
          </select> 
         </div> 
         <div class="para"> 
         <label for="services">Services</label> 
         <div class="multi-checkboxes"> 
          <div class="tall-check"><input id="loading" name="services" type="checkbox" value="loading" /></div> Loading and Unloading 
          <div style="clear:both;"></div> 
          <div class="tall-check"><input id="driving" name="services" type="checkbox" value="driving" /></div> Driving 
          <div style="clear:both;"></div> 
          <div class="tall-check"><input id="packing" name="services" type="checkbox" value="packing" /></div> Packing 
          <div style="clear:both;"></div> 
          <div class="tall-check"><input id="cleaning" name="services" type="checkbox" value="cleaning" /></div> Move-in/Move-out Cleaning 
          <div style="clear:both;"></div> 
          <div class="tall-check"><input id="help" name="services" type="checkbox" value="help" /></div> General Helper 
          <div style="clear:both;"></div> 
         </div> 
         </div> 
       <div style="clear:both;"></div> 
       <div style="clear:both;height:20px;"></div> 
       <div class="estimated"> 
       <span class="price" id="price">Estimated Price: Need More Information</span> 
       <br /><span class="estimated-time" id="estimated-time">Estimated Time: Need More Information</span> 
       </div> 
       <div style="clear:both;"></div> 
       <div id="navigation-form" class="navigation-form next-button"> 
       <ul> 
        <li style="display:none;"> 
         <a href="#">Next</a> 
        </li> 
        <li style="display:none;"> 
         <a href="#">Next</a> 
        </li> 
        <li class="step3"> 
         <a href="#">Next</a> 
        </li> 
       </ul> 
       </div> 
        </fieldset> 
        <fieldset class="step"> 
         <legend>Equipment</legend> 
         <div class="para"> 
          <label class="label-header" >Boxes</label> 
          <label for="large">Large</label> 
          <input id="large" name="large" type="number" placeholder="Quantity" /> 
         <br /> 
          <label for="medium">Medium</label> 
          <input id="medium" name="medium" type="number" placeholder="Quantity" /> 
         <br /> 
          <label for="small">Small</label> 
          <input id="small" name="small" type="number" placeholder="Quantity" /> 
         </div> 
         <div class="para"> 
          <label class="label-header" >Wardrobe Boxes</label> 
          <label for="sm-wardrobe">Shorty</label> 
          <input id="sm-wardrobe" name="sm-wardrobe" type="number" placeholder="Quantity" /> 
          <br /> 
          <label for="lg-wardrobe">Grand</label> 
          <input id="lg-wardrobe" name="lg-wardrobe" type="number" placeholder="Quantity" /> 
         </div> 
         <div class="para"> 
          <label class="label-header" >Mirror/Picture Boxes</label> 
          <label for="sm-mirror">Small</label> 
          <input id="sm-mirror" name="sm-mirror" type="number" placeholder="Quantity" /> 
         <br /> 
          <label for="lg-mirror">Large</label> 
          <input id="lg-mirror" name="lg-mirror" type="number" placeholder="Quantity" /><br /> 
          <label for="pic-ship">Picture Shipper</label> 
          <input id="pic-ship" name="pic-ship" type="number" placeholder="Quantity" /> 
         </div> 
         <div class="para"> 
          <label class="label-header" >Extras</label> 
          <label for="tape">Tape</label> 
          <input id="tape" name="tape" type="number" placeholder="Quantity" /> 
          <br /> 
          <label for="dolly">Dolly</label> 
          <select name="dolly" disabled> 
           <option selected>Included</option> 
          </select><br /> 
          <label for="blanket">Blanket</label> 
          <select name="blanket" id="blanket"> 
           <option value="yes">Yes</option> 
           <option value="no">No</option> 
          </select><br /> 
          <label for="junk">Junk Removal</label> 
          <select name="junk" id="junk"> 
           <option value="yes">Yes</option> 
           <option value="no" selected >No</option> 
          </select> 
         </div> 
         <div style="clear:both;height:20px;"></div> 
       <div class="estimated"> 
       <span class="price" id="price">Estimated Price: Need More Information</span> 
       <br /><span class="estimated-time" id="estimated-time">Estimated Time: Need More Information</span> 
       </div> 
       <div style="clear:both;"></div> 

       <div id="navigation-form" class="navigation-form next-button"> 
       <ul> 
        <li style="display:none;"> 
         <a href="#">Next</a> 
        </li> 
        <li style="display:none;"> 
         <a href="#">Next</a> 
        </li> 
        <li style="display:none;> 
         <a href="#">Next</a> 
        </li> 
        <li class="step4"> 
         <a href="#">Next</a> 
        </li> 
       </ul> 
       </div> 
        </fieldset> 
        <fieldset class="step"> 
         <legend>Terms and Conditions</legend> 
          <div class="para"> 
          <label class="label-header">Contact Information</label> 
          <label for="cust-name">Name</label> 
          <input id="cust-name" name="cust=name" type="text" placeholder="Name" /><br /> 
          <label for="cust-phone">Phone Number</label> 
          <input id="cust-phone" name="cust-phone" type="text" placeholder="Contact Number" /> 
          <br /> 
          <label for="address">Address</label> 
          <input id="address" name="address" type="text" placeholder="Address" /> 
          <br /> 
          <label for="city">City</label> 
          <input id="city" name="city" type="text" placeholder="City" /> 
          <br /> 
          <label for="state">State</label> 
          <input id="state" name="state" type="text" placeholder="State" /> 
          <br /> 
          <label for="zip">Zip</label> 
          <input id="zip" name="zip" type="text" placeholder="Zip" /> 
          </div> 
          <div class="para"> 
          <label class="label-header">Terms and Conditions</label> 
          <div style="width:100%;float:left;clear:both;text-align:left;"> 
          <p>Terms and conditions as follows: </p> 
          <p>... 
</p> 

         </div> 
          </div> 
         <div class="para"> 

         </div> 
         <div style="clear:both;height:20px;"></div> 
       < div class="estimated"> 
       <span class="price" id="price">Estimated Price: Need More Information</span> 
       <br /><span class="estimated-time" id="estimated-time">Estimated Time: Need More Information</span> 
       </div> 
       <div style="clear:both;"></div> 
         <div style="padding-top:20px;clear:both;"> 
         <input type="submit" class="submit" value="Submit" name="submit" id="submit" /> 
         </div> 
         <div style="clear:both;"></div> 

        </fieldset> 
        <fieldset class="step" style="width:10000px;background:none;"> 
        </fieldset> 
       </form> 
      </div> 
     <?php } ?> 
     </div> 
     <div class="side-atoz-widget">This is a side custom widget 
     </div> 
    </div> 

формы является модификация коды: http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/

Спасибо

Answer 1

I foun d, спасибо всем, кто посмотрел мой код Я только что создал оповещения с переменными и обнаружил, что некоторые объекты не определены. Таким образом, я увидел, что класс уже был список

$('.'+sameClass).parents('li').addClass('selected'); 

это посмотрело на родителях, хотя класс уже был список. Я изменил его на

$('.'+sameClass).addClass('selected'); 

работает как очарование!