javascript - 在 div 中使用 onclick 函数显示/隐藏另一个 div

Question

我以前这样做过，但由于某种原因，这次不起作用，而且我已经盯着它看了太久，我几乎可以保证我永远不会发现问题......

我有这段 HTML，它创建了一个表单。

<div class="paymentForm">               

    <span class="pgHeading" style="margin: 30px 0;">Payment Information</span>
    <div class="inputRedTemplate paymentType inputRoundedTop" onclick="javascript:displayPaymentFields()">
        <div class="label">Credit Card</div>
    </div>

    <div class="inputRedTemplate paymentType">
        <div class="label">Cash</div>
    </div>

    <div class="inputRedTemplate paymentType inputRoundedBottom" onclick="">
        <div class="label">Check</div>
    </div>

    <div id="cashPaymentBlock">
        <span>For cash payments, bills higher than $20 will not be accepted.</span>
    </div>

    <div id="ccPaymentBlock">
        <span class="ccDisclaimer" style="margin: 30px 0;">
           Your credit card transaction will be processed by your store location and you must
           present your credit card to the driver at the time the store delivers your order for a
           credit imprint and your signature.
        </span>

        <input id="card_name" name="cardName" class="inputRedTemplate inputFullWidth" placeholder="Cardholder Name" />
        <input id="card_number" name="cardNumber" class="inputRedTemplate inputFullWidth" placeholder="Card Number" onkeypress="return checkNumbers(event,this)" />
        <div class="error" id="err_msg" style="display: none;">Numbers only!</div>

        <input id="card_type" name="cardType" class="inputRedTemplate inputFullWidth inputRoundedBottom" placeholder="Credit Card Type" />
        <input id="card_expire_month" name="cardExpireMonth" class="inputRedTemplate gcNumber" placeholder="2 Digit Expiration Month" />
        <input id="card_expire_year" name="cardExpireYear" class="inputRedTemplate gcPin" placeholder="4 Digit Year" />
        <input id="card_zip" name="cardZip" class="inputRedTemplate inputFullWidth inputRoundedBottom" placeholder="Billing ZIP Code" />
    </div>
    <div class="btnRedTemplate btnFullWidth checkoutBtn floatLeft" style="margin-top:30px;" onclick="" title="Submit Button" />Submit</div>
</div>

我有以下脚本:

<script>
    $(document).ready( function () {
        hideAllPaymentBlocks();
    })

    function hideAllPaymentBlocks() {
      $('#cashPaymentBlock').hide();
      $('#ccPaymentBlock').hide();
      // add line for checks, too
    }    

    function displayPaymentFields() {
        $('ccPaymentBlock').show();  
    }

</script>

hideAllPaymentBlocks 函数在就绪函数中正确运行，但 displayPaymentFields 在单击信用卡 div 时似乎没有运行。没有错误；它只是不做任何事情。有人能指出我正确的方向吗？正如我所说，我已经盯着这个问题有一段时间了，我确信这是一个简单的解决方案，但我无法让我的大脑工作。

Answer 1

您忘记了哈希$('#ccPaymentBlock').show();