我在HTML中有两个部分。我想要的是，我希望在填充第一部分的控件并使用completed点击Next按钮时动态添加一个名为jquery的类。
以下是我的html
<section id="siteDetails" class="tabPane first active">
<h2>Site Details</h2>
<div class="tabText clearfix">
<div class="form-group">
<div class="col-md-3 marginBottom">
<label>Type of Site <span class="compulsory">*</span></label>
<select id="ddlSiteType" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="OWN BUILD">OWN BUILD</option>
<option value="IP COLO">IP COLO</option>
<option value="RCOM COLO">RCOM COLO</option>
</select>
</div>
<div class="col-md-9 marginBottom">
<label>Site / Plot Dimension (Mtr) (Minimum Required :18W*18D Mtr) Ref attached Plot drawing for reference. <span class="compulsory">*</span></label>
<input class="form-control" id="txtSitePlotDimension" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">Technology <span class="compulsory">*</span></label>
<select id="ddlTechnolgy" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="SCPC">SCPC</option>
<option value="TDMA">TDMA</option>
</select>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">Mount Type <span class="compulsory">*</span></label>
<select id="ddlMountType" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="PM">PM</option>
<option value="NPM">NPM</option>
</select>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">Antenna Size <span class="compulsory">*</span></label>
<select id="ddlAntennaSize" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="2.4">2.4</option>
<option value="3.8">3.8</option>
<option value="7.3">7.3</option>
<option value="11.1">11.1</option>
</select>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">AMSL(m) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAMSL" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-3 marginBottom">
<label>Platform required <span class="compulsory">*</span></label>
<div class="clearfix"></div>
<div class="radio">
<label class="col-xs-6">
<input type="radio" name="Platform" value="YES" id="rbPltYes" />
Yes</label>
<label class="col-xs-6">
<input type="radio" name="Platform" value="NO" id="rbPltNo" />
No</label>
</div>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label>Platform Height(m) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtPlatformHeight" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label>Rooftop Site <span class="compulsory">*</span></label>
<div class="clearfix"></div>
<div class="radio">
<label class="col-xs-6">
<input type="radio" name="Rooftype" value="YES" id="rbRFSYes" />
Yes</label>
<label class="col-xs-6">
<input type="radio" name="Rooftype" value="NO" id="rbRFSNo" />
No</label>
</div>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label>No of Floors in building</label>
<input type="text" class="form-control" id="txtNoofFloorsBldg" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" disabled="disabled" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>In addition to standard space requirement for Roof top Site additional space 5 Mtr * 4 Mtr for VSAT Antenna. <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAddRoofTopSite" maxlength="50" />
</div>
<div class="col-md-6 marginBottom">
<label>
Structural Stability Certificate (SST)<br class="hidden-sm" />
from Local consultant <span class="compulsory">*</span></label>
<input type="text" class="form-control" maxlength="50" id="txtStructuralStability" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>Height of the Antenna from Ground [Mtrs] <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txthegtAntennaFromGrnd" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
<div class="col-md-6 marginBottom">
<label>Satellite Band <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtSatelliteBand" />
</div>
</div>
</div>
</section>
<section id="antennaOrientation" class="tabPane">
<h2>Antenna Orientation</h2>
<div class="tabText clearfix">
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>Azimuth Angle </label>
<%--<input type="text" class="form-control" id="txtAzimuthAngle" maxlength="50" />--%>
<label>GSAT 16 (55° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth16" maxlength="10" />
<br />
<label>Azimuth Angle GSAT 18 (74° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth18" maxlength="10" />
<br />
<label>Azimuth Angle GSAT 12 (83° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth12" maxlength="10" />
<br />
<label>Azimuth Angle GSAT 17 (93.5° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth17" maxlength="10" />
</div>
<div class="col-md-6 marginBottom">
<label>Elevation Angle </label>
<%--<input type="text" class="form-control" id="txtElevationAngle" maxlength="50" />--%>
<label>GSAT 16 (55° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation16" maxlength="10" />
<br />
<label>GSAT 18 (74° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation18" maxlength="10" />
<br />
<label>GSAT 12 (83° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation12" maxlength="10" />
<br />
<label>GSAT 17 (93.5° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation17" maxlength="10" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>Distance to nearest airport (KM) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtdistNearAirport" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
<div class="col-md-6 marginBottom">
<label>Airport Name <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAirportName" maxlength="50" />
</div>
</div>
</div>
</section>
<div class="formNavigation clearfix">
<div class="col-md-12">
<a class="formbutt prev">Previous</a>
<a class="formbutt next">Next</a>
</div>
</div>jquery或任何其他方式添加类
更新
我想在这里添加该课程
<div class="tabList">
<ul>
<li class="tab first active" id="SiteDetails"><a rel="#siteDetails" href="#">Site Details</a></li>
<li class="tab"><a rel="#antennaOrientation" href="#">Antenna Orientation</a></li>
<li class="tab"><a rel="#losclearance" href="#">LOS Clearance</a></li>
<li class="tab"><a rel="#cablesandelectrical" href="#">Cables & Electrical</a></li>
<li class="tab"><a rel="#otherdetails" href="#">Other Details</a></li>
<li class="tab"><a rel="#panoramicPhotos" href="#">Panoramic Photos</a></li>
<li class="tab"><a rel="#satelliteLosSnaps" href="#">Satellite LOS Snaps</a></li>
<li class="tab"><a rel="#SitePlotLayout" href="#">Site /Plot Layout</a></li>
<li class="tab last"><a rel="#SiteFinalizationReport" href="#">Site Finalization Report</a></li>
</ul>
</div>
更新2
显示标签隐藏
/*next show and hide*/
$('.next').on('click', function () {
if ($('.tabList li.active').next().hasClass('last')) {
$('.formNavigation .next').hide();
//$('.formNavigation .saveAsDraft, .formNavigation .submit').show();
$('.tabList li.active').removeClass('active').next().addClass('active');
$('.tabContent .tabPane.active').removeClass('active').next().addClass('active');
} else {
$('.formNavigation .prev').show();
$('.tabList li.active').removeClass('active').next().addClass('active');
$('.tabContent .tabPane.active').removeClass('active').next().addClass('active');
}
});
答案 0 :(得分：1)
您可以使用jQuery siteDetails在$('#siteDetails').addClass('completed');部分添加课程，或者按$('#siteDetails').hide();隐藏该部分。
请查看此解决方案。点击Previous / Next按钮。
$('#siteDetails').show();
$('#antennaOrientation').hide();
$('.formNavigation .prev').hide();
$('.next').click(function(){
$('#siteDetails').addClass('completed');
$('#siteDetails').hide();
$('#antennaOrientation').show();
$('.formNavigation .next').hide();
$('.formNavigation .prev').show();
});
$('.prev').click(function(){
$('#siteDetails').show();
$('#antennaOrientation').hide();
$('.formNavigation .next').show();
$('.formNavigation .prev').hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="siteDetails" class="tabPane first active">
<h2>Site Details</h2>
<div class="tabText clearfix">
<div class="form-group">
<div class="col-md-3 marginBottom">
<label>Type of Site <span class="compulsory">*</span></label>
<select id="ddlSiteType" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="OWN BUILD">OWN BUILD</option>
<option value="IP COLO">IP COLO</option>
<option value="RCOM COLO">RCOM COLO</option>
</select>
</div>
<div class="col-md-9 marginBottom">
<label>Site / Plot Dimension (Mtr) (Minimum Required :18W*18D Mtr) Ref attached Plot drawing for reference. <span class="compulsory">*</span></label>
<input class="form-control" id="txtSitePlotDimension" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">Technology <span class="compulsory">*</span></label>
<select id="ddlTechnolgy" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="SCPC">SCPC</option>
<option value="TDMA">TDMA</option>
</select>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">Mount Type <span class="compulsory">*</span></label>
<select id="ddlMountType" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="PM">PM</option>
<option value="NPM">NPM</option>
</select>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">Antenna Size <span class="compulsory">*</span></label>
<select id="ddlAntennaSize" class="form-control custom-select">
<option selected="selected">--Select--</option>
<option value="2.4">2.4</option>
<option value="3.8">3.8</option>
<option value="7.3">7.3</option>
<option value="11.1">11.1</option>
</select>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label for="exampleInputEmail1">AMSL(m) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAMSL" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-3 marginBottom">
<label>Platform required <span class="compulsory">*</span></label>
<div class="clearfix"></div>
<div class="radio">
<label class="col-xs-6">
<input type="radio" name="Platform" value="YES" id="rbPltYes" />
Yes</label>
<label class="col-xs-6">
<input type="radio" name="Platform" value="NO" id="rbPltNo" />
No</label>
</div>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label>Platform Height(m) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtPlatformHeight" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label>Rooftop Site <span class="compulsory">*</span></label>
<div class="clearfix"></div>
<div class="radio">
<label class="col-xs-6">
<input type="radio" name="Rooftype" value="YES" id="rbRFSYes" />
Yes</label>
<label class="col-xs-6">
<input type="radio" name="Rooftype" value="NO" id="rbRFSNo" />
No</label>
</div>
</div>
<div class="col-sm-6 col-md-3 marginBottom">
<label>No of Floors in building</label>
<input type="text" class="form-control" id="txtNoofFloorsBldg" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" disabled="disabled" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>In addition to standard space requirement for Roof top Site additional space 5 Mtr * 4 Mtr for VSAT Antenna. <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAddRoofTopSite" maxlength="50" />
</div>
<div class="col-md-6 marginBottom">
<label>
Structural Stability Certificate (SST)<br class="hidden-sm" />
from Local consultant <span class="compulsory">*</span></label>
<input type="text" class="form-control" maxlength="50" id="txtStructuralStability" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>Height of the Antenna from Ground [Mtrs] <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txthegtAntennaFromGrnd" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
<div class="col-md-6 marginBottom">
<label>Satellite Band <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtSatelliteBand" />
</div>
</div>
</div>
</section>
<section id="antennaOrientation" class="tabPane">
<h2>Antenna Orientation</h2>
<div class="tabText clearfix">
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>Azimuth Angle </label>
<%--<input type="text" class="form-control" id="txtAzimuthAngle" maxlength="50" />--%>
<label>GSAT 16 (55° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth16" maxlength="10" />
<br />
<label>Azimuth Angle GSAT 18 (74° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth18" maxlength="10" />
<br />
<label>Azimuth Angle GSAT 12 (83° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth12" maxlength="10" />
<br />
<label>Azimuth Angle GSAT 17 (93.5° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAzimuth17" maxlength="10" />
</div>
<div class="col-md-6 marginBottom">
<label>Elevation Angle </label>
<%--<input type="text" class="form-control" id="txtElevationAngle" maxlength="50" />--%>
<label>GSAT 16 (55° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation16" maxlength="10" />
<br />
<label>GSAT 18 (74° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation18" maxlength="10" />
<br />
<label>GSAT 12 (83° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation12" maxlength="10" />
<br />
<label>GSAT 17 (93.5° E) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtElevation17" maxlength="10" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 marginBottom">
<label>Distance to nearest airport (KM) <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtdistNearAirport" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
<div class="col-md-6 marginBottom">
<label>Airport Name <span class="compulsory">*</span></label>
<input type="text" class="form-control" id="txtAirportName" maxlength="50" />
</div>
</div>
</div>
</section>
<div class="formNavigation clearfix">
<div class="col-md-12">
<a id="prevBtn" class="formbutt prev">Previous</a>
<a id="nextBtn" class="formbutt next">Next</a>
</div>
</div>
答案 1 :(得分：1)
使用.addClass('classname')方法，您可以动态添加类。
if(condition){
$("#id").addClass('classname');
}
其中id是您要添加类的html元素。
答案 2 :(得分：1)
$('.next').on('click',function(){
var formfields=$("#siteDetails input:text, #siteDetails input:radio,#siteDetails select");
var counter=0;
formfields.each(function(){
if($(this).val!=''){
counter=counter+1;
}
});
if(counter==formfields.length)
{
$('#antennaOrientation').addClass('completed ');
}
else{alert(' fill all fields');}
});
您必须使用on（）函数将所需的工作附加到click事件，并使用addClass（）将.completed添加到您必须设置计数器的第二个函数，以确保所有表单字段都填充了val属性然后如果计数器等效于表单字段添加类别别做类似警报，不是所有表单字段都填充