0

我无法使用以下功能。

单击 .image 类时，将替换 3 个 div（图库文本、图像和缩略图集）中的内容。我一直在努力让它工作好几天，但我无法弄清楚我做错了什么。

我的代码：

     // Init load 
  $(document).ready(function() {
        var $doc = $(document.body);


        var text = $('#gallerytext1').html();  //blank divs are filled with content on page load 
        $('#gallerytext').html(text);
        var thumbset = $('#thumbset1').html();
        $('#thumbset').html(thumbset);  
        $('#image').html('<img src="images/edwards1.jpg" border="0"/>');


    //click handler
       $doc.on("click",".image",function(){

        var image=$(".image").attr("rel"); 
        var imid=$(".image").attr("data");
        var text=$('#gallerytext'+imid).html();
        var thumbset=('#thumbset'+imid).html();

        $('#debug').html(imid);

        $('#gallerytext').fadeIn('slow');
        $('#gallerytext').html(text);
        $('#thumbset').fadeIn('slow');
        $('#thumbset').html(thumbset);
        $('#image').hide();                 
        $('#image').fadeIn('slow');
        $('#image').html('<img src="' + image + '"/>');
        return false;


      });
  });

初始内容加载得很好，但我无法让点击处理程序工作。具有 .image 类的对象的格式如下：

<a href="#" rel="images/edwards2.jpg" data="1" class="image image2"><img src="images/edwardsthumb2.jpg" class="thumb" border="0"/></a>

任何帮助将不胜感激，谢谢。

4

1 回答 1

0

这些可能是您有问题的行：

var image=$(".image").attr("rel"); 
var imid=$(".image").attr("data");

$(".image")选择所有具有 . 类的元素image。你只想要被点击的那个，所以用this它来引用它：

var image = $(this).attr("rel"); 
var imid = $(this).attr("data");

另外，不要组成自定义属性，例如data. HTML5 引入了data-用于存储自定义数据类型的属性，因此请使用它们：

data-number="1"

您可以使用以下.data()方法访问它：

var imid = $(this).data('number');
于 2013-02-10T02:23:53.693 回答