-2

我正在尝试创建一个基本的图像旋转。我将图像按名称本地存储在一个名为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>
4

3 回答 3

2

几个错误，

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 文件）。或将所有脚本代码粘贴到<head>HTML 文件的标记中

于 2013-09-03T16:28:04.207 回答
0

你的代码很垃圾。更好地使用JS Hint（或其他 JS 验证器，甚至带有 Web 控制台的 Chrome/Firefox）之类的工具来实际确保代码甚至可以运行。

以下是它的（一些）问题：

  1. 你缺少分号
  2. 你的.ready()功能（我相信）过早结束
  3. 你click处理错了（@bipen 指出）
  4. 你的if陈述搞砸了
  5. 您（可能）没有在 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文件中。

于 2013-09-03T16:30:49.860 回答
0

这些东西也应该用以下方式包装：

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

不仅仅是你的var声明。

于 2013-09-03T16:30:55.913 回答