jquery - 如何删除 标签的 javascript 属性并将其替换为其他 jQuery 属性？

Question

我在codepen.io中发现这段代码非常简单，我真的没有任何错误，代码工作得很好。

我希望能够删除标记中的 javascript 属性，并能够添加另一种类型的控件来继续或返回表单的步骤。

然后删除它:

<a href="#" onclick="show_step('1')">back</a>
<a href="#" onclick="show_step('3')">next</a>

并以这种方式替换为控件:

<a href="#back" class="btn btn-warning back">back</a>
<a href="#next" class="btn btn-success next">next</a>

从而消除这些易于从浏览器控制台修改的属性。

onclick="show_step('1')"

let currentStep = 1; // Variable that indicates the current step

function show_step(step) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + step;
  var valid = true;

  // [OPTIONAL] We validate only if it is going forward
  if (currentStep < step) {
  
    // We search all input fields within the current step.  
    $('#step' + currentStep).find('input').each((idx, el) => {
      $field = $(el);

      // If the field is empty
      if (!$field.val()) {
        $field.parent().addClass('error');
        valid = false;
      } else {
        $field.parent().removeClass('error');
      }
    });
  }

  // If at least one field was not completed
  if (!valid) {
    return;
  }

  $('#step' + currentStep).css("display", "none");
  $('#step' + step).fadeIn("slow");
  currentStep = step;
};

$(function() {
  $('#step' + currentStep).fadeIn("slow");
});

label {
  display: block;
}
.step {
  display: none;
}
.errorMsg {
  display: none;
  color: red;
}
.error .errorMsg {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form">
  <div id="step1" class="step">
    <h1>Step 1</h1>
    <label>
      <span>Name :</span>
      <input name="name" />
      <div class="errorMsg">You must enter your name</div>
    </label>
    <label>
      <span>last name:</span>
      <input name="last_name" />
      <div class="errorMsg">You must enter your last name</div>
    </label>
    <!-- &&& -->
    <a href="#" onclick="show_step('2')">next</a>
  </div>
  <div id="step2" class="step">
    <h1>Step 2</h1>
    <label>
      <span>Email :</span>
      <input name="email" />
      <div class="errorMsg">You must enter your email</div>
    </label>
    <!-- &&& -->
    <a href="#" onclick="show_step('1')">back</a>
    <a href="#" onclick="show_step('3')">next</a>
  </div>
  <div id="step3" class="step">
    <h1>Step 3</h1>
    <a href="#" onclick="show_step('2')">back</a>
    <a href="#" onclick="show_step('4')">next</a>
  </div>
  <div id="step4" class="step">
    <h1>Step 4</h1>
    <a href="#" onclick="show_step('3')">back</a>
  </div>
</form>

Answer 1

更新

OP 目标是使该过程独立于简单的数字索引(虽然有一个计数器，但它是针对 url 变量的)。 演示 2 依赖于 .next()和.prev()移动方法，有一个对象文字来存储它的数据，并且严重依赖 this在运行时定位位置和状态。 演示 2 有更多“移动部件”，因此用户更难通过控制台进行操作。

<小时/>使用 on() 方法将点击事件委托(delegate)给所有 <a> anchor 。

演示 1

let currentStep = 0; // Variable that indicates the current step

$('#step' + currentStep).fadeIn("slow");

$('a.next, a.back').on('click', function(e) {
  var step = $(this).data('idx');
  xStep(step);
});

function xStep(step) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + step;
  var valid = true;

  // [OPTIONAL] We validate only if it is going forward
  if (currentStep < step) {

    // We search all input fields within the current step.  
    $('#step' + currentStep + ' .data').each(function(idx, el) {

      // If the field is empty
      if (!$(this).val()) {
        $(this).next('.msg').addClass('error');

        valid = false;

      } else {
        $(this).next('.msg').removeClass('error');

      }
    });
    if (!valid) {
      return
    }
  }

  $('#step' + currentStep).css("display", "none");
  $('#step' + step).fadeIn("slow");
  currentStep = step;
}

label {
  display: block;
}

.step,
.msg {
  display: none;
}

.msg.error {
  display: inline-block;
  color: red;
}

legend {
  font: 600 3ch/1.2 Consolas
}

.dir {
  font-size: 2.5ch;
  text-decoration:none; 
}

.next::after {
  content: '\0a\25b6';
  font-size: 2ex;
}

.back::before {
  content: '\25c0\0a';
  font-size: 2ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form">
  <fieldset id="step0" class="step">
    <legend>Step 1</legend>
    <label>
      First Name:
      <input name="fName" class='data'>
      <b class="msg">You must enter your name</b>
    </label>
    <label>
      Last Name:
      <input name="lName" class='data'>
      <b class="msg">You must enter your last name</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='next dir' data-idx='1'>next</a>
  </fieldset>
  <fieldset id="step1" class="step">
    <legend>Step 2</legend>
    <label>
      Email:
      <input name="email" type='email' class='data'>
      <b class="msg">You must enter your email</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='back dir' data-idx='0'>back</a>
    <a href="#/" class='next dir' data-idx='2'>next</a>
  </fieldset>
  <fieldset id="step2" class="step">
    <legend>Step 3</legend>
    <a href="#/" class='back dir' data-idx='1'>back</a>
    <a href="#/" class='next dir' data-idx='3'>next</a>
  </fieldset>
  <fieldset id="step3" class="step">
    <legend>Step 4</legend>
    <input type='submit'>
    <a href="#/" class='back dir' data-idx='2'>back</a>
  </fieldset>
</form>

<小时/> 演示中评论了详细信息

演示 2

// Object literal stores data
var move = {
  step: 0,
  next: true
};
// Initial step
$('.step:first').fadeIn("slow");

// A click event on any a.dir...
$('a.dir').on('click', function(e) {

  /* Get the fieldset.step parent of this a.dir
  || if this a.dir has .back class...
  */
  var $current = $(this).parent('.step');
  if ($(this).hasClass('back')) {
    //...set the move object properties accordingly
    move.step -= 1;
    move.next = false;
  } else {
    //...otherwise change the properties the other way
    move.step += 1;
    move.next = true;
  }
  /* Invoke call() function on xStep() function
  || to set 'this' as the clicked <a>nchor
  */
  xStep.call(this, move, $current);
});

// Pass the move object and the current .step
function xStep(move, $current) {
  var data = $("#form").serialize();
  var url = 'saveTemp.php?step=' + move.step;

  // if next property is true...
  if (move.next) {

    /* find all .data in current .step and do
    || the following on each of them:
    */
    $current.find('.data').each(function(idx, el) {
      // Find input.data proceeding b.msg
      var $msg = $(this).next('.msg');

      // if this input.data has no value...
      if (!$(this).val()) {

        //...display error meassage
        $msg.addClass('error');
      } else {
        //...otherwise remove any error message
        $msg.removeClass('error');
      }
    });
    // if there are any b.msg.error, end the function
    if ($('.error').length > 0) {
      return;
    }
    // Remove current .step
    $current.css("display", "none");
    // fadeIn proceeding .step
    $current.next('.step').fadeIn("slow");
  } else {
    //...otherwise remove current .step 
    $current.css("display", "none");
    // fadeIn preceeding .step
    $current.prev('.step').fadeIn("slow");
  }
}

html,
body {
  font: 400 1.5ch/1.2 Consolas;
  font-variant: small-caps
}

label,
input {
  font: inherit;
  font-variant: normal
}

label {
  display: block;
}

.step,
.msg {
  display: none;
}

.msg.error {
  display: inline-block;
  color: red;
}

legend {
  font-size: 2.5ch;
}

.dir {
  display: inline-block;
  text-decoration: none;
  margin-top: 12px;
}

.next::after {
  content: '\0a\25b6';
  font-size: 2ex;
}

.back::before {
  content: '\25c0\0a';
  font-size: 2ex;
}

[type=submit] {
  float: right
}

<form id="form">
  <fieldset class="step">
    <legend>Step 1</legend>
    <label>
      First Name:
      <input name="fName" class='data'>
      <b class="msg">First name is required</b>
    </label>
    <label>
      Last Name:&nbsp;
      <input name="lName" class='data'>
      <b class="msg">Last name is required</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='next dir'>Next</a>
  </fieldset>
  <fieldset class="step">
    <legend>Step 2</legend>
    <label>
      Email:
      <input name="email" class='data'>
      <b class="msg">Email: username@domain.com</b>
    </label>
    <!-- &&& -->
    <a href="#/" class='back dir'>Back</a>
    <a href="#/" class='next dir'>Next</a>
  </fieldset>
  <fieldset class="step">
    <legend>Step 3</legend>
    <a href="#/" class='back dir'>Back</a>
    <a href="#/" class='next dir'>Next</a>
  </fieldset>
  <fieldset class="step">
    <legend>Step 4</legend>
    <a href="#/" class='back dir'>Back</a>
    <input type='submit'>
  </fieldset>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>