Question

我正在尝试使用html，jquery和css制作间谍手机（请不要问） css不是问题它更多的是jquery

    <div id="spyphone" class="spyphone">
            <button id="messagebutton"class="spyphonebutton">Messages</button>
            <div id="messages">
                <p>hai</p>
            </div>
            <button class="spyphonebutton">Browser</button>
            <iframe id="browser" src="http://www.google.com"></iframe>
            <button id="exit">Exit</button>
            <script>
                $("#messages").hide();
                $("#browser").hide();
                $("#exit").hide();
                $("#messagebutton").click(function () { 
                    $("#exit").show(); 
                    $("#messages").show();
                });
                $("#exit").click(function () { 
                    if ($("#messages:visible") == true) {
                        $("#messages").hide(); // does not hide the messages
                        $("#exit").hide(); // does not hide exit button
                    } else if ($("#browser:visible") == true) {
                        $("#browser").hide();
                    }
                });
            </script>
        </div>
    </div>
    <!-- End of spy phone -->

这是一个非常奇怪的问题。没有输出...... 它应该工作，但它没有...我没有其他信息....

Answer 1

$("#messages:visible")返回jQuery对象，而不是Boolean。

尝试使用.is()，将$("#messages").is(":visible")替换为$("#messages:visible") == true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spyphone" class="spyphone">
            <button id="messagebutton"class="spyphonebutton">Messages</button>
            <div id="messages">
                <p>hai</p>
            </div>
            <button class="spyphonebutton">Browser</button>
            <iframe id="browser" src="http://www.google.com"></iframe>
            <button id="exit">Exit</button>
            <script>
                $("#messages").hide();
                console.log($("#messages:visible")
                            , $("#messages:visible") === false);
                $("#browser").hide();
                $("#exit").hide();
                $("#messagebutton").click(function () { 
                    $("#exit").show(); 
                    $("#messages").show();
                });
                $("#exit").click(function () { 
                    if ($("#messages").is(":visible")) {
                        $("#messages").hide(); // does not hide the messages
                        $("#exit").hide(); // does not hide exit button
                    } else if (!$("#browser").is(":visible")) {
                        $("#browser").hide();
                    }
                });
            </script>
        </div>
    </div>

jquery / html / ajax - jquery没有显示/隐藏元素

1 个答案: