文章/答案/技术大牛

发布

社区首页 >问答首页 >在现有代码中使用jquery的addClass

问在现有代码中使用jquery的addClass
EN

Stack Overflow用户

提问于 2018-06-02 21:56:48

回答 2查看 84关注 0票数 0

我正尝试在代码中添加一个带有jQuery的类，但它不起作用。

我想要有一个额外的类，用于前面的表单步骤。我怎么才能做到这一点呢？如果我在前面的步骤中键入addclass，则只有在按下previous按钮时才能看到它。

下面是jQuery代码和超文本标记语言：

$(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>

javascript

jquery

html

回答 2

Stack Overflow用户

发布于 2018-06-03 00:16:26

要将新的css-class添加到已单击的nextBtn中，您可以调整相应的单击侦听器。下面的示例在单击按钮且所有验证成功后添加css类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');
    }

});

票数 0

Stack Overflow用户

发布于 2018-06-03 22: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');
  });

感谢您的宝贵时间:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50657648

复制

相似问题

问在现有代码中使用jquery的addClass
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在现有代码中使用jquery的addClassEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在现有代码中使用jquery的addClass
EN