-2
메뉴에 대해 동일한 클래스 이름을 가진 목록이 여러 개 있습니다. 어떤 이유로 메뉴 중 하나를 클릭해도 모든 메뉴가 변경되지 않습니다. 내가 놓친 게 있니? 코드의 변형jQuery 동일한 클래스로 여러 목록에 클래스 추가하기
/***** 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/
여기 장기 무관 코드에 대한 유감 JS이며고마워요
정말 도움을 드리고 싶지만, http://jsbin.com/jutaji/1/edit 만 볼 수 있습니다. 왜 모든 'display : none', 'next'및 how 실제로 수행해야합니다. 2 줄의 텍스트로 모두 설명하셨습니까? (당신이하고 싶은 것을 그림으로 보여줄 수있는 작은 예제를 만들고 추가 세부 사항으로 질문을 개선하십시오. 코드 등에서 기대하는 바가 작동하지 않는 것 –
http://170.75.154.211/~atozmovi/moving- 비용 계산기/ 여기 링크가 사이트에 있습니다. 나는 그것이 도움이되기를 바랍니다. 다음 버튼과 상위 메뉴 막대를 동기화하려고하므로 두 번째 링크가 강조 표시되면 다음 버튼이 강조 표시됩니다. 상단 탐색을 클릭하면 잘 작동합니다 ... –
콘솔에 항상 오류가 있는지 확인하십시오. 'validateStep is not defined' 에러가 발생했습니다. 나는 그것이 당신의 문제에 대한 결과라고 생각합니다. –