jQuery和Js函数的语法混合

jQuery and Js functions syntax mixing

本文关键字：语法 混合 函数 Js jQuery      更新时间：2023-09-26

我有一个小问题。这只是整个代码的一小段，它通常通过setInterval(time,function)来运行;命令，但我想取代自动滑动的图片，而不是有一个"下一个"按钮，为什么我不能只是使用jQuery和粘贴到一个

$("#nextBtn").click(nextSlide);

命令吗?我的按钮出现了，但是没有事件。是不是我把jQuery命令放到了JS 

function onLoadWindow(e) {}

而不是jQuery的

$(document).ready(function() {})

我最近刚刚学习完JS的基础知识，不久之后开始学习jQ，所以我在这两方面都还是初学者，但有一些Java编程经验。我对把语法混在一起有点陌生。非常感谢你的帮助!=)

编辑:用完整的代码替换代码片段。我试着略读，去掉一些不需要的东西，比如一些标签和相关的样式。但是现在我甚至不能让div按钮发送文本到控制台，所以我很确定这是一个明显的"新手"错误，抱歉"浪费"了人们的时间。 
<!DOCTYPE html>
  <html>
           <head>
        <meta charset="UTF-8">
        <title>JS Slideshow</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <style type="text/css">
            .slide {
                height:200px;
                width:320px;
                position:absolute;
                opacity:0;
            }
            img {
                width:100%;
                height:100%;
            }   
            #slideshow {
                position:relative;
            }
            .active {
                opacity:1;
                transition:opacity 1s;
            }
            #nextBtn {
                display:block;
                float:left;
                height:25px;
                width:40px;
                background-color:black;
                margin-top:210px;
            }
        </style>
        <script type="text/javascript">
            window.addEventListener("load",onLoadWindow);
            var active_slide;
            var slides;
            function onLoadWindow(e) {
                var slideShow=document.getElementById("slideshow");
                slides=slideShow.getElementsByTagName("div");
                active_slide=0;
                slides[0].classList.add("active");
                //setInterval(nextSlide,10000);
                $("nextBtn").click(nextSlide);
            }
            function nextSlide () {
                slides[active_slide].classList.remove("active");
                active_slide++;
                active_slide%=3;  
                slides[active_slide].classList.add("active");
            }

        </script>
    </head>
    <body>
        <div id="slideshow">
            <div class="slide">
                <img src="IMG/bridge.jpg" alt="" title="" />
            </div>
            <div class="slide">
                <img src="IMG/leaf.jpg" alt="" title="" />
            </div>
            <div class="slide">
                <img src="IMG/road.jpg" alt="" title="" />
            </div>
</div>
    <div id="nextBtn"></div>
    </body>
</html>

它确实只是一个缺失的哈希符号来正确地引用Id。感谢所有人，当然也感谢VeXii指出这一点(x)

相关文章：