现有代码中带有jquery的addClass
[英]addClass with jquery in existing Code
问题描述
我正在尝试将带有jQuery的类添加到我的代码中，但是它不起作用。
我想为表单的前面的步骤准备一个额外的类。 我该怎么做？ 如果我在前面的步骤中键入addclass ，则只有在按上一个按钮时才可见。
这是jQuery代码和HTML：
$(document).ready(function() { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'), allPrevBtn = $('.prevBtn'); allWells.hide(); navListItems.click(function(e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-primary').addClass('btn-next'); $item.addClass('btn-primary'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allPrevBtn.click(function() { var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"); prevStepWizard.removeAttr('disabled').trigger('click'); }); allNextBtn.click(function() { var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='url']"), isValid = true; $(".form-group").removeClass("has-error"); for (var i = 0; i < curInputs.length; i++) { if (!curInputs[i].validity.valid) { isValid = false; $(curInputs[i]).closest(".form-group").addClass("has-error"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); }); $('div.setup-panel div a.btn-primary').trigger('click'); });
<!DOCTYPE html> <html lang="de"> <head> <title>leasing</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="assets/css/costum.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="stepwizard row col-md-12"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" class="btn btn-primary"><i class="fab fa-font-awesome-flag"></i> Hey there!</a> </div> <div class="stepwizard-step"> <a href="#step-2" class="btn btn-default" disabled="disabled"><i class="fas fa-user"></i> Information</a> </div> <div class="stepwizard-step"> <a href="#step-3" class="btn btn-default" disabled="disabled"><i class="fas fa-store"></i> Store</a> </div> <div class="stepwizard-step"> <a href="#step-4" class="btn btn-default" disabled="disabled"><i class="fas fa-bicycle"></i> Bicycle</a> </div> <div class="stepwizard-step"> <a href="#step-5" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Insurance</a> </div> <div class="stepwizard-step"> <a href="#step-6" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Shipment</a> </div> </div> </div> <form class="leasingform col-md-10 col-xs-8" role="form" action="" method="post"> <div class="row setup-content" id="step-1"> <div class="col-12"> <div class="row"> <div class="welcome-text col-md-12"> <h3>Hey there and welcome,</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lore</p> </div> <div class="form-group col-md-6"> <label class="control-label">First Name</label> <input maxlength="100" required="required" class="form-control" placeholder="Enter First Name" type="text"> </div> <div class="form-group col-md-6"> <label class="control-label">Last Name</label> <input maxlength="100" required="required" class="form-control" placeholder="Enter Last Name" type="text"> </div> <div class="col-md-12"> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button> </div> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-6 col-md-12"> <div class="col-md-12"> <div class="form-group col-md-12"> <label class="control-label">Address</label> <textarea required="required" class="form-control" placeholder="Enter your address"></textarea> </div> <div class="form-group"> <label class="control-label">Company Name</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text"> </div> <div class="form-group"> <label class="control-label">Company Address</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text"> </div> <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-6 col-md-12"> <div class="col-md-12"> <div class="form-group"> <label class="control-label">Company Name</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text"> </div> <div class="form-group"> <label class="control-label">Company Address</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text"> </div> <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button> </div> </div> </div> <div class="row setup-content" id="step-4"> <div class="col-xs-6 col-md-12"> <div class="col-md-12"> <div class="form-group"> <label class="control-label">Company Name</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text"> </div> <div class="form-group"> <label class="control-label">Company Address</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text"> </div> <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button> </div> </div> </div> <div class="row setup-content" id="step-5"> <div class="col-xs-6 col-md-12"> <div class="col-md-12"> <div class="form-group"> <label class="control-label">Company Name</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text"> </div> <div class="form-group"> <label class="control-label">Company Address</label> <input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text"> </div> <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button> </div> </div> </div> <div class="row setup-content" id="step-6"> <div class="col-xs-6 col-md-12"> <div class="col-md-12"> <button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button> <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button> </div> </div> </div> </form> </div> </body>
2 个解决方案
解决方案1
0 2018-06-02 16:16:25
要将新的CSS类添加到已单击的nextBtn中，可以调整相应的单击侦听器。 以下示例在单击按钮且所有验证成功之后添加了css-class step-done 。
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
/* ...your other code remains here... */
if (isValid) {
// Do the following to add a css-class to the last step button
$(this).addClass('step-done');
// Do the following to add a css-class to the div containing the last step
curStep.addClass('step-done');
nextStepWizard.removeAttr('disabled').trigger('click');
}
});
解决方案2
0 2018-06-03 14:17:54
好吧，我设法使它正常工作，就像我想要的那样。
我不得不
$('div.setup-panel div a[href="#' + curStepBtn + '"]')
并像这样构建它：
allPrevBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"); $('div.setup-panel div a[href="#' + curStepBtn + '"]').removeClass('step-done'); prevStepWizard.removeAttr('disabled').trigger('click'); });
删除前面步骤的类。
添加它，我这样管理：
allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='url']"), isValid = true; $(".form-group").removeClass("has-error"); for(var i=0; i<curInputs.length; i++){ if (!curInputs[i].validity.valid){ isValid = false; $(curInputs[i]).closest(".form-group").addClass("has-error"); } } if (isValid) $('div.setup-panel div a[href="#' + curStepBtn + '"]').addClass('step-done'); nextStepWizard.removeAttr('disabled').trigger('click'); });
感谢您的时间 ：）
使用jQuery $（this）.addClass不起作用，简单代码不起作用
[英]using jQuery $(this).addClass not working, simple code not working
jQuery代码前的addClass和代码后的removeClass不起作用
[英]jquery addClass before code and removeClass after code don't work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.