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

由于您发布的代码使用的是纯JavaScript，因此您看起来并不像是在寻找jQuery。以下是使用和不使用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>

Answer 2

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

Answer 3

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

有效但你需要使用jQuery

Answer 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>

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

4 个答案: