-2
我有一個菜單的類名相同的多個列表，並且由於某種原因，當我點擊其中的一個時，它不會更改所有菜單。我錯過了什麼嗎？jQuery將一個類添加到同一類的多個列表
這裏是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/
謝謝
我真的很想幫忙，但我所能看到的只是http://jsbin.com/jutaji/1/edit這並不清楚爲什麼所有這些「display：none」，「next」和how它應該實際執行。你確定你用兩行文字解釋了它嗎？ （創建一個小例子來幫助我們描述你正在做的事情，並通過更多的細節改進你的問題。什麼不符合你期望的代碼等等） –
http://170.75.154.211/~atozmovi/moving-成本計算器/ 這裏是鏈接到網站。我希望它有幫助。 我正在嘗試使頂部菜單欄與下一個按鈕同步，因此當下一個按鈕被擊中時，第二個鏈接將被突出顯示。 當我點擊頂部導航時，它工作正常... –
總是檢查控制檯是否有錯誤。你有'validateStep未定義'錯誤。我認爲這是你的問題的結果。 –