Question

我正在尝试创建一个基本图像旋转。我将我的图像按名称存储在名为comics的文件夹中。每个漫画名称都是comic_（加上数字）。当我点击我的按钮时它什么都不做。它甚至不会禁用我以前的按钮。请帮忙。谢谢你们。

这是我的JS / Jquery ......

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
      //declare my variables
      var comic_img = $('#comicpane').find('img')
      var current_comic_number = parseInt(comic_img.attr('class').replace('comic_','')) 
      var prev_comic = current_comic_number - 1;
      var next_comic = current_comic_number + 1;    

    });

    if (current_comic_number == 1){

      //disable the prev button
      $("#prev").attr('disabled','disabled');

      //When the user clicks on a nav item
      $(".nav_link").on('click')function(){

        //Get the button they clicked
        current_button = $(This);

        if (current_button.attr('id')) == 'next'
        {
          comic_img.attr('class','comic_') + next_comic + ".jpg";
          comic_img.attr('src','comics/comic_1') + next_comic;

          //change variables to reflect current comic
          current_comic_number +=1;
          next_comic +=1;
          prev_comic +=1;
        }

        //Only other option
        else
        {
          comic_img.attr('src','comics/comic_1') + prev_comic + '.jpg';
          comic_img.attr('class','comic_') + prev_comic;

          //Change variables to reflect comic
          current_comic_number -=1;
          next_comic -=1;
          prev_comic -=1;
        }

        //If comic number is less or equal to 1 and prev button is Not disabled, it needs   to be disabled.
        if (current_comic_number <=1 && !$('#pev').attr('disabled','disabled'))
        {
          $('#prev').removeAttr('disabled')
        }
      }
    }
    </script>

这是我的HTML ...

    <html>
    <head>
    <title>SRS Comic Zone</title>
    <link rel="stylesheet" href="srscomiczone.css" media="screen">
    </head>

    <body>
    <div id="header">
    <img id="header" src="HeaderPicture.png" align=center>
    </div>
    <div class="comiczone" id="comicpane" align=center>
    <img class="comic_1" src="comics/comic_1.jpg">
    </div>
    <div id="comicNav" align=center>
    <button id="prev" class="nav_link">Previous</button>
    <button id="next" class="nav_link" >Next</button>
    </div>
    </body>
    </html>

Answer 1

几乎没有错误，

1）这就是你调用点击事件的方式

$(".nav_link").on('click',function(){ 
  ....

而不是

$(".nav_link").on('click')function(){  //replace this with above code

如果动态添加选择器，您可能还需要委派选择器.....

2）

current_button = $(This);

应该是

 current_button = $(this);

3）另外，请注意..如果您使用的是jquery 1.6+，请使用prop（）而不是attr（）

$("#prev").prop('disabled',true);

而不是

$("#prev").attr('disabled','disabled');

4）将所有代码添加到document.ready $(document).ready(function(){ //here });函数内，而不是外部。

5）最重要的是，您要么必须在html页面中包含脚本（js文件）。或将所有脚本代码粘贴到HTML文件的<head>标记内

Answer 2

您的代码无用。更好地使用JS Hint（或其他JS验证器，甚至是带有Web控制台的Chrome / Firefox）等工具来确保代码可以运行。

以下是（部分）问题：

你缺少分号
您的.ready()函数（我相信）过早结束
你正在做click处理错误（由@bipen指出）
您的if陈述搞砸了
您（可能）未将脚本包含在HTML文档中

广告1 这里缺少分号：

var comic_img = $('#comicpane').find('img')

广告2 current_comic_number是$.ready()中的局部变量，但它在此函数之外使用

广告3 它不是有效的JS（参见@ bipen的回答）：

$(".nav_link").on('click')function(){

广告4 它无效if声明：

if (current_button.attr('id')) == 'next'

它应该是：

if (current_button.attr('id') === 'next')

广告5 仅在<script>文件中使用*.html标记，而不是*.js。例如：

<script src="main.js"></script>

然后，将所有JS代码放入main.js文件。

Answer 3

这些东西也应该包装：

$(document).ready(function() {
    $(".nav_link").on('click',function(){
    ...
});

不仅仅是您的var声明。

JavaScript / Jquery没有执行我的函数

3 个答案: