通过单选按钮切换时添加和删除类

Question

我正在尝试根据单选按钮行为添加和删除一个类。这个想法是，如果选择的单选按钮值是贝宝，那么所有 class="required" 表单输入字段都会被删除，并且当切换到信用卡时，所有从它们中删除所需类的字段都会返回所需的类。这是我的做法

$('input[name*="payment"]').on('change', function() {
  var type = this.value;
  switch (type) {
    case 'paypal':
      $('#payment input').each(function() {
        if ($(this).hasClass('required')) {
          $(this).removeClass('required');
          $(this).addClass('requiredFalse');
        }
      });
    case 'creditcard':
      $('#payment input').each(function() {
        if ($(this).hasClass('requiredFalse')) {
          $(this).addClass('required');
          $(this).removeClass('requiredFalse');
        }
      });
  }
});

这是小提琴。无法弄清楚我做错了什么。

https://jsfiddle.net/sghoush1/d225cdrp/1/

Answer 1

您switch-case 错过了休息时间。因此，当 type 为“paypal”时，两种情况都被执行，这就是 switch 的工作方式。所以试试这个：

$('input[name*="payment"]').on('change', function() {
  var type = this.value;
  switch (type) {
    case 'paypal':
      $('#payment input').each(function() {
        if ($(this).hasClass('required')) {
          $(this).removeClass('required');
          $(this).addClass('requiredFalse');
        }
      });
      break;
    case 'creditcard':
      $('#payment input').each(function() {
        if ($(this).hasClass('requiredFalse')) {
          $(this).addClass('required');
          $(this).removeClass('requiredFalse');
        }
      });
      break;
  }
});

Answer 2

$(document).ready(function(){
$('input[name*="payment"]').on('change', function() {
  var type = this.value;
  switch (type) {
    case 'paypal':
      $('#payment input').each(function() {
        if ($(this).hasClass('required')) {
          $(this).removeClass('required');
          $(this).addClass('requiredFalse');
        }
      });
      break;
    case 'creditcard':
      $('#payment input').each(function() {
        if ($(this).hasClass('requiredFalse')) {
          $(this).addClass('required');
          $(this).removeClass('requiredFalse');
        }
      });
      break;
  }
  //console.log(type);
});
});

Answer 3

尝试 toggleClass 让您的代码更短。

//To remove require and add requiredFalse 
$(this).toggleClass("required requiredFalse");

//To add requireFalse and remove require
$(this).toggleClass("requiredFalse required");

更多关于 toggleClass 的信息可以在这里找到。 toggleClass

检查工作示例的代码段

$('input[name*="payment"]').on('change', function() {
  var type = this.value;
  switch (type) {
    case 'paypal':
          $('#payment input').each(function() {
            if ($(this).hasClass('required')) {
              $(this).toggleClass("required requiredFalse");
            }
          });
          break;
    case 'creditcard':
          $('#payment input').each(function() {
            if ($(this).hasClass('requiredFalse')) {
              $(this).toggleClass("requiredFalse required");
            }
          });
          break;
    }
})

.requiredFalse {
  border: 1px solid black;
}

.required {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>creditcard</div>
<input type="radio" name="payment" value="creditcard">
<div>paypal</div>
<input type="radio" name="payment" value="paypal">
<form id="payment">
  <input class="required" type="text" id="address1">
  <input type="text" id="address2">
  <input class="required" type="text" id="zipcode">
</form>