Question

我有一个项目，我必须在其中设置在线购物的送货地址。对于付款，付款选项是各种信用卡，例如：paypal，签证等。所以付款选项是一个下拉菜单。

我有两个标签，即“creditcard no”和“ccv”。这些应该最初隐藏。选择付款选项（从下拉列表中）后，应显示这两个标签。

$(document).ready(function() {
  $('.nav-toggle').click(function() {
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function() {
      if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        toggle_switch.html('Show');
      } else {
        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      }
    });
  });

});

.round-border {
  border: 1px solid #eee;
  border: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <section class="round-border">
    <div>
      <button href="#collapse1" class="nav-toggle">credit card</button>
    </div>
    <div id="collapse1" style="display:none">

      <label>
        Payment Option

        <select name="credit">
          <option value="paypal">Paypal</option>
          <option value="Visa">Visa</option>
          <option value="Visa">Master Card</option>
          <option value="Discover">Discover</option>
          <option value="American Express">American Express</option>
          <option value="Alipay">Alipay</option>
        </select>
      </label>

      <br>Card Number:
      <input type="text" size="24" maxlength="20" name="cc_number" onBlur="
    				  
    				  cc_number_saved = this.value;
    				  this.value = this.value.replace(/[^\d]/g, '');
    				  if(!checkLuhn(this.value)) {
    				    alert('Sorry, this is not a valid number - Please try again!');
    				    this.value = '';
    				  }
    				" onFocus="
    				  // restore saved string
    				  if(this.value != cc_number_saved) this.value = cc_number_saved;
    				">
      <input type="submit" type="submit" name="submit" value="Ok">
      <br>ccv:&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <input type="text" name="ccv" required>
      <br>
    </div>
  </section>
</body>

Answer 1

此代码可以满足您的要求。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
  display:none;
}
</style>
<script> 
function display() {
  ccn.style.display='inherit';
  ccv.style.display='inherit';
}
</script>
</head>
<body>
<form>
<select onchange='display();'>
  <option selected>Please select...</option>
  <option>Visa</option>
  <option>MasterCard</option>
  <option>Paypal</option>
</select>
<label id='ccn'>Credit Card Number</label>
<label id='ccv'>Credit Card Validation</label>
</form>
</body>
</html>

function display() {
  ccn.style.display = 'inherit';
  ccv.style.display = 'inherit';
}

label {
  display: none;
}

<form>
  <select onchange='display();'>
    <option selected>Please select...</option>
    <option>Visa</option>
    <option>MasterCard</option>
    <option>Paypal</option>
  </select>
  <label id='ccn'>Credit Card Number</label>
  <label id='ccv'>Credit Card Validation</label>
</form>

label元素的CSS最初不显示标签。更改下拉列表时会触发onChange事件，该事件会调用display()函数。然后，通过DOM更改标签的样式，使标签可见。

我不知道脚本规则，但为了整合，我改变了代码。

如何隐藏和显示标签控件JavaScript？

1 个答案: