Question

我想要实现的是拥有一个响应式水平和垂直滑块，用于我的投资组合。出现问题的地方是我有一个<div>的数组都有类'项目。我似乎无法定位每个<div>的特定实例，即使具有click事件的元素位于要定位的元素内。

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

到目前为止，这是我的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());
    });

 });

Answer 1

请参阅this SO问题。你的“parentElement”对象返回一个对象，而不是一个元素名称（正如你所假设的那样），所以抛出了一个错误：

未捕获错误：语法错误，无法识别的表达式：[object Object]＆gt; 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());
});

Answer 2

以下是对此的回答，任何人都有同样的问题：

// 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);
    });

使用JQuery </div>仅在数组中定位<div>的某个实例

2 个答案: