我有一个菜单具有相同类名的多个列表，出于某种原因，当我点击其中一个时，它不会改变所有菜单。我错过了什么吗？
这是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/
谢谢
答案 0 :(得分：0)
我找到了，谢谢大家看了我的代码 我刚刚用变量创建了警报，发现一些对象未定义。所以我看到这个班级已经是名单
了$('.'+sameClass).parents('li').addClass('selected');
这看了一下父母，虽然这个课程已经是一个名单了。我把它改成了
$('.'+sameClass).addClass('selected');
就像一个魅力！