Question

我正在尝试根据单选按钮行为添加和删除类。我们的想法是，如果选定的单选按钮值是paypal，那么所有class =“required”表单输入字段都将被删除，当切换到信用卡时，所有需要从中删除所需类的字段都会返回所需的类。我就是这样做的

  function equalPress() {

  storedNumberTwo = document.getElementById("output").innerHTML;
  // if(sign === 1) {
  calc = +storedNumberTwo + +storedNumber;
  document.getElementById("output").innerHTML = calc;
  // }
  }

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

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

Answer 1

你switch-case错过了休息时间。因此当类型为“paypal”时，两个案例都被执行，这就是交换机的工作原理。所以试试这个：

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

要检查工作示例的代码段

＆＃13;

$('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;
    }
})

＆＃13;

.requiredFalse {
  border: 1px solid black;
}

.required {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

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

3 个答案: