jQuery将一个类添加到具有相同类的多个列表中
对于一个菜单，我有多个具有相同类名的列表，由于某种原因，当我单击其中一个时，所有菜单的类名都不会改变。我错过什么了吗 这是JS，很抱歉有这么长不相关的代码：jQuery将一个类添加到具有相同类的多个列表中,jquery,addclass,Jquery,Addclass,对于一个菜单，我有多个具有相同类名的列表，由于某种原因，当我单击其中一个时，所有菜单的类名都不会改变。我错过什么了吗 这是JS，很抱歉有这么长不相关的代码： /***** START SLIDER ****/ $(function() { /* number of fieldsets */ var fieldsetCount = $('#formElem').children().length; /* current position of f
/***** 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 ****/
<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>
谢谢我找到了它，谢谢所有看过我代码的人 我刚刚用变量创建了警报，发现有些对象没有定义。所以我看到这个班已经在名单上了
$('.'+sameClass).parents('li').addClass('selected');
$('.'+sameClass).addClass('selected');
工作起来很有魅力 我真的很想帮忙，但我所能看到的是，还不清楚为什么会显示这些内容：无、nexts以及它应该如何实际执行。你确定你用两行文字解释了这一切吗？创建一个小示例，帮助我们了解您正在尝试做什么，并通过其他细节改进您的问题。什么是不工作的，你期望从你的代码等这里是链接到该网站。我希望有帮助。我正在尝试使顶部菜单栏与“下一步”按钮同步，因此当按下“下一步”按钮时，第二个链接将高亮显示。当我点击顶部导航时，它工作正常…总是检查控制台是否有错误。您有一个validateStep未定义错误。我认为这是你问题的结果。验证测试不应该影响它我不认为。。。