使用 JavaScript/jQuery 函数打开和关闭 HTML 功能答案

【问题标题】：Switching an HTML feature on and off with a JavaScript/jQuery function使用 JavaScript/jQuery 函数打开和关闭 HTML 功能
【发布时间】：2017-03-20 21:17:46
【问题描述】：

我有一个 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>

【问题讨论】：

你的 Javascript 代码中有额外的 }) 所以我猜你遗漏了一些重要的东西。您的函数周围是否有 document.ready 代码？
我们开始 document.ready 使函数不在全局范围内....删除 document.ready，这里没有必要。
@epascarello 谢谢，我只是试着把它拿出来 - 但没有效果。什么时候需要？

标签： javascript jquery html button toggle

【解决方案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>

【讨论】：

所以澄清一下，我会使用 either jQuery 还是 JavaScript，但在这两种情况下都添加函数代码？我是否需要在 .js 文档中添加任何其他内容，或者只是上面的内容？我尝试了几种组合，但没有任何效果。有人建议在服务器上测试（而不是在本地），但我的大部分 JS 在测试时都在本地工作......感谢你的时间
这将是非此即彼。如果您采用普通的 javascript 方式，只需删除当前的 onOffScroll() 函数并将其替换为完整的 JS sn-p 即可。如果您想使用 jQuery，请对 jQuery sn-p 执行相同操作。如果您选择获取 jQuery 路由，请确保您在页面中引用了 jQuery 库。如果您不这样做，那么它将无法正常工作。如果你更新你的代码，我可以看看你哪里出错了，但上面应该没有任何问题。
另外，看看你的控制台（按F12），看看是否有任何错误。如果有，请告诉我该错误是什么。

【解决方案2】：

$("#buttonID").click(function(){
    $("elementsToScroll").toggle();
});

【讨论】：

【解决方案3】：

$("#buttonID").click(function(){
    $("elementsToScroll").toggle();
});

有效，但您需要使用 jQuery

【讨论】：

抱歉，网速慢?
谢谢，还是没有效果。我想我正在使用 jQuery - 我还尝试指定按钮的 ID 并使用它 ($("#onOff") )
您是在服务器还是本地文件上进行测试？有时，除非它在服务器上，否则这些功能不起作用（我相信这是一项安全功能）
嗯，我正在本地测试，但到目前为止我尝试过的所有其他 JavaScript 都可以在本地运行，如果它可以工作的话......目前正在查看是否可以在服务器上进行测试虽然
我认为它只适用于 jQuery。 jQuery 在本地从来不适合我

【解决方案4】：

jQuery toggle 方法应该可以做到。

$(function() {
    var elm = $('#elementsToScroll');
    $('.grapes').on('click', function() {
        elm.toggle();
    });
});

无需在按钮上使用内联 JavaScript：

<button type="button" class="grapes">Grapes</button>

$(function() {
    var elm = $('#elementsToScroll');
    $('.grapes').on('click', function() {
        elm.toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 type="button" class="grapes">Grapes</button>

【讨论】：