Question

这是为了向html表单添加交互性。

我正在尝试在选择相应选项时显示付款选择信息。然后隐藏其他选项。因此，如果选择信用卡，信用卡显示的信息，则比特币和贝宝的信息将被隐藏。反之亦然。

出于某种原因，当我选择信用卡时，一切正常，

然而，当我切换到贝宝或比特币时，根本没有显示任何内容。我怎样才能解决这个问题？我宁愿不使用jQuery。

以下是各自的JS：

// Payment Info section of the form. Display payment sections based on chosen payment option
document.getElementById("payment options").addEventListener("change", function(){
    var paymentOption = document.getElementById('payment');
    var paymentSelection = paymentOption.value;
    var container = document.getElementById('payment-container');
    var creditCard = document.getElementById('credit-card');
    var bitcoin = document.getElementById('bitcoin');
    var paypal = document.getElementById('paypal');

    // "Credit Card" payment option isselected by default so display of the #credit-card div... 
    // hide the "Paypal" and "Bitcoin information.
    if(paymentSelection === "credit card") {
        bitcoin.style.visibility = 'hidden';
        paypal.style.visibility = 'hidden';
        creditCard.style.visibility = 'visible';

    }if(paymentSelection === "paypal") {
        console.log('paypal');
        // If user selects the "PayPal" payment option, display the Paypal information, and hide the credit card + Bitcoin
        bitcoin.style.visibility = 'hidden';
        creditCard.style.visibility = 'hidden';
        paypal.style.visibility = 'visible';

    } if(paymentSelection === "bitcoin") {
        console.log('bitcoin');
        /// If user selects the "Bitcoin" payment option, display the Bitcoin information, and hide the credit card + paypal.
        paypal.style.visibility = 'hidden';
        creditCard.style.visibility = 'hidden';
        bitcoin.style.visibility = 'visible';                  
    }
});

这是html：

<fieldset id="payment options">
        <legend>Payment Info</legend>

        <label for="payment">I'm going to pay with:</label>
        <select id="payment" name="user_payment">
          <option value="credit card">Credit Card</option>
          <option value="paypal">PayPal</option>
          <option value="bitcoin">Bitcoin</option>
        </select>
        <div id="payment-container">

        <div id="credit-card" class="credit-card">

          <div class="col-6 col">
            <label id="cc-numLbl" for="cc-num">Card Number:</label>
            <input id="cc-num" name="user_cc-num" type="text">
          </div>

          <div class="col-3 col">
            <label for="zip" id="zipLbl">Zip Code:</label>
            <input id="zip" name="user_zip" type="text"> 
          </div>

          <div class="col-3 col">
            <label id="cvvLbl" for="cvv">CVV:</label>
            <input id="cvv" name="user_cvv" type="text"> 
          </div>

          <label>Expiration Date:</label>
          <select id="exp-month" name="user_exp-month">
            <option value="1">1 - January</option>
            <option value="2">2 - February</option>
            <option value="3">3 - March</option>
            <option value="4">4 - April</option>
            <option value="5">5 - May</option>
            <option value="6">6 - June</option>
            <option value="7">7 - July</option>
            <option value="8">8 - August</option>
            <option value="9">9 - September</option>
            <option value="10">10 - October</option>
            <option value="11">11 - November</option> 
            <option value="12">12 - December</option>                       
          </select>  
          <select id="exp-year" name="user_exp-year">
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>                      
          </select>                                
        </div> 
        <div id="paypal">
          <p>If you selected the PayPal option we'll take you to Paypal's site to set up your billing information, when you click 'Register' below.</p>
        </div>
        <div id="bitcoin">
          <p>If you selected the Bitcoin option we'll take you to the Coinbase site to set up your billing information. Due to the nature of exchanging Bitcoin, all Bitcoin transactions will be final.</p>
        </div> 
      </fieldset>

Answer 1

首先，代码有效。可见性确实会发生正确变化，但如果进行以下更改，则可能会获得实际的预期效果：

（这些更改后的结果代码可以在这里看到：https://jsfiddle.net/fojbgaxh/）

1）分别使用element.style.visibility = 'hidden'和element.style.visibility = 'visible'，而不是element.style.display = 'none'和element.style.display = 'block'。当你使用前者（visibility ='hidden'）时，元素不再可见，但不会放弃它的区域空间，所以你留下了一个空白的空间。

2）您的当前代码会显示全部三个，直到选择了一个选项，而不是信用卡选项。为了在默认情况下显示信用卡选项，您可以在HTML声明中将其他两个选项设置为“隐藏”。

Answer 2

我创建了一个包含代码here的小提琴。

正如您所看到的，它可以根据您的要求正常运行，但是，当您使用.visibility时，包含付款信息的div仍占用其原始区域。我的猜测是你的css容器的大小只是为了占用信用卡信息，因此你无法看到你的其他HTML。

要解决您的问题，请尝试使用display代替visibility。我更新了示例here。

为什么我的元素仅在选择信用卡时显示/隐藏？

2 个答案: