0

我想要实现的是有一个响应式水平和垂直滑块用于我的投资组合。问题出现在我有一个<div>带有类 'project. 我似乎无法定位 each 的特定实例<div>，即使带有 click 事件的元素位于要定位的元素内。

直观地解释：当用户单击“右”箭头时，JQuery 应计算<img>单击箭头实例中 s 的数量并循环遍历它们。错误似乎出现在 JQuery 当前正在检查所有<div class=project">s 中的总图像的地方。你可以在这里看到一个活生生的例子：

http://yaocho-digital.com/portfolio/

到目前为止，这是我的 JQuery：

 $(document).ready(function() {

    // Get amount of projects

    var projectTotal = $('.project').length;

    // Get window height

    var windowHeight = $(window).height();

    // Create 'clickCounter' variable, so as not to go over the project amount, set at 1 to reflect 'nth-child' value of projects created before

    var clickCounter = 1;

    // Animate each window height on 'down' click

    $('.down').click(function() {
         $('.container').animate({top: '-=' + windowHeight}, 'fast');
         clickCounter = clickCounter + 1;
         if (clickCounter > projectTotal) {
            $('.container').animate({top: '0'}, 'fast');
            clickCounter = 1;
         }
    });

    // Hide all images

    $('.project > img').hide();

    // Get the amount of images in each project

    var imageTotal = $('.project > img').length;

    // Set the initial image at one, not zero, so that the variable can control 'nth-child'

    var imageCounter = 1;

    // Show first <img> of each project

    $('.project > img:nth-child(' + imageCounter + ')').show();

    // Set variable for retrieving parent of clicked 'next'

    var parentElement = $(this).parent();

    $('.next').click(function() {
        $('' + parentElement + ' > img:nth-child(' + imageCounter + ')').hide();
        $('' + parentElement + ' > img:nth-child(' + imageCounter + ')').next().show();
        imageCounter = imageCounter + 1;
        if (imageCounter > imageTotal) {
            imageCounter = 1;
            $('' + parentElement + ' > img').hide();
            $('' + parentElement + ' > img:nth-child(' + imageCounter + ')').show();
        }
        console.log($(this).parent());
    });

 });
4

2 回答 2

0

请参阅这个SO 问题。您的“parentElement”对象正在返回一个对象而不是元素名称（正如您所假设的那样），因此会引发错误：

未捕获的错误：语法错误，无法识别的表达式：[object Object] > img:nth-child(1)

尝试使用：

$('.next').click(function() {
    $('img:nth-child(' + imageCounter + ')', parentElement).hide();
    $('img:nth-child(' + imageCounter + ')', parentElement).next().show();
    imageCounter = imageCounter + 1;
    if (imageCounter > imageTotal) {
        imageCounter = 1;
        $('img', parentElement).hide();
        $('img:nth-child(' + imageCounter + ')', parentElement).show();
    }
    console.log($(this).parent());
});
于 2013-05-06T12:26:19.813 回答
0

这是这个问题的答案，如果有人有同样的问题：

// Hide all images

    $('div.project > img').hide();

    // Get the amount of images in each project

    var imageTotal = $(this).find('div.project > img').size();

    // Set the initial image at one, not zero, so that the variable can control 'nth-child'

    var imageCounter = 1;

    // Show first <img> of each project

    $('div.project > img:nth-child(' + imageCounter + ')').show();

    // Initiate carousel on 'next'

    $('a.next').click(function() {
        imageCounter = imageCounter + 1;
        $(this).parent().find('img').hide();
        $(this).parent().find('img:nth-child(' + imageCounter + ')').show();
        if (imageCounter > imageTotal) {
            imageCounter = 1;
            $(this).parent().find('img').hide();
            $(this).parent().find('img:nth-child(' + imageCounter + ')').show();
        }
        console.log(imageCounter);
        console.log(imageTotal);
    });
于 2013-05-07T10:35:54.980 回答