Question

我有一个预订系统，用户将在预订页面上登陆并提示选择日期/时间。当他们点击按钮时，我希望我的目标网页图片（包含在div中）被隐藏，可用的座位（也在div中）出现在同一个地方。我在这个帖子How to hide one div and show another div using button onclick?上找到了一些代码。但是发生的情况是图像从一开始就不会出现，屏幕只是空白，然而第二个div确实出现，所以它只是我遇到问题的第一个div。代码如下，任何帮助都会很棒。

JS：

function switchVisible() {
    if (document.getElementById('seatspic').style.display == 'none') {
        document.getElementById('seatspic').style.display = 'block';
        document.getElementById('seats').style.display = 'none';
    } else {
        document.getElementById('seatspic').style.display = 'none';
        document.getElementById('seats').style.display = 'block';
    }
}

HTML：

<div id="seats" style="display: none;">
    <?php echo $chart; ?>
</div>
<div id="seatspic">
    <img  style="display: block;" src="img/UCCBooking.jpg">
</div>

<a class="btn btn-primary btn-lg" onClick="switchVisible()">Check Availability</a>

Answer 1

关于如何使用类来切换两个元素的基本思路。

function switchVisible() {
    document.getElementById("wrapper").classList.toggle("open");
}

#wrapper #seats,
#wrapper.open #seatspic{
    display : block;
}

#wrapper.open #seats,
#wrapper #seatspic {
    display : none;
}

<div id="wrapper">
    <div id="seats">
        Seats
    </div>
    <div id="seatspic">
       Pic
    </div>
</div>

    <a class="btn btn-primary btn-lg" onClick="switchVisible()" href="#">Check Availability</a>

显示div并隐藏另一个单击按钮

1 个答案: