javascript - 使用 JavaScript/jQuery 函数打开和关闭 HTML 功能

Question

我有一个 HTML 功能(下落的物体)，其中包含以下内容:

<div id="elementsToScroll">
            <marquee behavior=scroll direction=down scrollamount=2 scrolldelay=43 height=581 style='position:absolute; left:17%; top:23px; width:100; height:581px;'><font>🍇</font></marquee>
</div>

和这个按钮:

      <button onclick="onOffScroll()">Grapes</button>

我正在尝试使用以下 JavaScript 使按钮打开和关闭该功能:

 $(document).ready(function(){
    function onOffScroll() {
        var x = document.getElementById('elementsToScroll');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }}
 });

请帮助我确定为什么它不起作用(或者是否有更好的方法)。

(我知道掉落的物体已经过时，但这不是重点 - 我想让切换功能正常工作，以便可以随意打开或关闭)。谢谢:)

脚本:

<!--Scripts-->
<script src="/js/myjQuery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Answer 1

看起来您并不是在寻找 jQuery，因为您发布的代码使用的是纯 JavaScript。以下是如何使用和不使用 jquery 执行此操作的两个示例:

JQuery 方式(正如 @Dylan Anlezark 提到的)

function onOffScroll() {
    $('#elementsToScroll').toggle();
}

纯 JavaScript 方式

function onOffScroll() {
    var x = document.getElementById('elementsToScroll');

    if (isVisible(x)) {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}

function isVisible(element) {
    return element.offsetWidth !== 0 && !element.offsetHeight !== 0;
}

假设您的 HTML 按照您发布的方式进行设置，则除了 onOffScroll 的函数代码之外，您无需更改任何内容

<div id="elementsToScroll">
        <marquee behavior=scroll direction=down scrollamount=2 scrolldelay=43 height=581 style='position:absolute; left:17%; top:23px; width:100; height:581px;'><font>🍇</font></marquee>
    </div>
    <button onclick="onOffScroll()">Grapes</button>