Javascript jQuery和Js函数语法混合_Javascript_Jquery_Function

Javascript jQuery和Js函数语法混合

javascript jquery function

Javascript jQuery和Js函数语法混合,javascript,jquery,function,Javascript,Jquery,Function,我有以下的小问题。这只是整个代码的一个片段，通常通过setInterval（时间、函数）运行；命令，但我想用一个“下一步”按钮来代替自动滑动图片，为什么我不能使用jQuery并将其粘贴到 $("#nextBtn").click(nextSlide); 指挥部？我得到我的按钮出现，但没有事件。可能是我把jQuery命令放在JS中了吗 function onLoadWindow(e) {} 而不是jQuery的 $(document).ready(function() {}) 我最近刚学习完

我有以下的小问题。这只是整个代码的一个片段，通常通过setInterval（时间、函数）运行；命令，但我想用一个“下一步”按钮来代替自动滑动图片，为什么我不能使用jQuery并将其粘贴到

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

指挥部？我得到我的按钮出现，但没有事件。可能是我把jQuery命令放在JS中了吗

function onLoadWindow(e) {}

而不是jQuery的

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

我最近刚学习完JS的基础知识，不久就开始学习jQ，所以我还是这两方面的初学者，但之前有一些Java编程经验。我对混合语法有点陌生。非常感谢您的帮助！=）

编辑：用完整代码替换代码段。我试着略过它，拿出一些不需要的东西，比如一些标签和相关的样式。但现在我似乎连div按钮都不能发送文本到控制台，所以我很确定在某个地方有一个明显的“noob”错误，很抱歉“浪费”了人们的时间

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


JS幻灯片
.幻灯片{
高度：200px；
宽度：320px；
位置：绝对位置；
不透明度：0；
}
img{
宽度：100%；
身高：100%；
}   
#幻灯片放映{
位置：相对位置；
}
.主动{
不透明度：1；
过渡：不透明度1s；
}
#下一个{
显示：块；
浮动：左；
高度：25px；
宽度：40px；
背景色：黑色；
利润上限：210px；
}
addEventListener（“加载”，onLoadWindow）；
var主动滑动；
var幻灯片；
函数onLoadWindow（e）{
var slideShow=document.getElementById（“slideShow”）；
slides=slideShow.getElementsByTagName（“div”）；
主动滑动=0；
幻灯片[0]。类列表。添加（“活动”）；
//设定间隔（下一次滑动，10000）；
$（“nextBtn”）。单击（nextSlide）；
}
函数nextSlide（）{
幻灯片[活动幻灯片].classList.remove（“活动”）；
活动幻灯片++；
有效滑动%=3；
幻灯片[活动幻灯片].classList.add（“活动”）；
}

事实上，正确引用Id只是缺少一个哈希符号。。感谢all，当然还有VeXii指出的x）

当您从控制台手动调用它时，

nextSlide

功能是否工作？您需要显示代码的整体结构：“单击”处理程序设置代码在哪里？“nextSlide”函数声明在哪里？它的语法也是一样的——jQuery只是一个JavaScript库，它添加了一些功能，但根本没有扩展语法。将来，向我们展示你的所有代码。你错过了选择器中的hash bang$（“nextBtn”）。单击（nextSlide）`假设为`$（“#nextBtn”）。单击（nextSlide）`对吗？