Выбор следующего элемента с заданным классом из элемента, указанного в коде с помощью jQuery - PullRequest
Новая
       1

Выбор следующего элемента с заданным классом из элемента, указанного в коде с помощью jQuery

1 голос
/ 21 февраля 2012

Я пробовал множество вариантов сейчас!

У меня есть набор элементов, которые содержат миниатюры, созданные ASP Повторяющиеся и динамически отображаемые на странице при загрузке AJAX, внутри них есть несколько значков, которые при нажатии увеличивают изображение.

Повторный HTML выглядит так: 

    <div class="prodImgContainer">
        <img src="*url*" id="*id*" class="itemImages" />
        <div class="imgControl">
            <span class="tinyIcons tinyDelete imgDelete" id="delete*id*"></span>
            <br />
            <span class="tinyIcons tinyZoom imgZoom" id="zoom*id*"></span>
        </div>
    </div>

Итак, когда вы что-нибудь с классом imgZoom, оно запускает расширение. Это делается с помощью стандартной функции загрузки модальных окон. 

    $('.imgZoom').live('click', function () {
        var prodId = $('#productId').val();
        var thisImage = ($(this).attr('id').replace('zoom', '')).replace('-tb', '');
        var img = $("<img />").addClass('nextImg').attr('id', 'thisImg' + thisImage).attr('src', '*BASE URL *' + prodId + '/' + thisImage + '.jpg').load(function () {
            if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                alert('broken image!');
            } else {
                $("#largeImgContainer").empty();
                $('#showImg').click();
                $("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow');
            };
        });
    });

Приведенный выше код загружает увеличенное изображение в существующий контейнер.

Теперь ... Я хочу иметь возможность вызвать событие click для следующего элемента imgZoom, щелкнув по созданному изображению.

Хотя вызывающего элемента больше нет в коде, поэтому я пытаюсь сделать это так: 

    $('.nextImg').live('click', function () {
        var nextImage = ($(this).attr('id').replace('thisImg', '')).replace('-tb', '');
        $('#zoom' + nextImage + '-tb').next('.nextImg').click();
    });

Здесь я могу определить идентификатор элемента, который был изначально нажат, чтобы открыть это изображение

Я ожидаю, что $('#zoom' + nextImage + '-tb').next('.nextImg').click(); найдет этот элемент, затем найдите следующий с классом nextImg и щелкните по нему

Но это не работает ... что мне не хватает?

Ответы [ 5 ]

0 голосов
/ 22 февраля 2012

Argh !!

Ничего из вышеперечисленного не сработало, но спасибо за помощь.

Я закончил тем, что создал массив изображений и пропустил позицию, чтобы при открытии следующего клика по изображениюфайл в следующей позиции в массиве.

0 голосов
/ 21 февраля 2012

Трудно понять, чего вы хотите, между вашими словами и вашим кодом есть различия.

Может быть, вместо этой строки 

$('#zoom' + nextImage + '-tb').next('.nextImg').click();

это будет работать: 

$('#zoom' + nextImage + '-tb').parents('.prodImgContainer').next('.prodImgContainer').find('.imgZoom').click();

Что я не понял: использование '-tb' - где это часть идентификатора, а где нет? Почему вы позвонили .next ('. NextImg')? Я думал, что вы хотите нажать на следующий элемент imgZoom. В вашем коде только (одиночное) изображение в largeImgContainer имеет класс nextImg.

0 голосов
/ 21 февраля 2012

Вы должны иметь возможность прикрепить щелчок к динамически созданному элементу изображения, чтобы вызвать щелчок по следующему элементу imgZoom, то есть что-то вроде: 

...
$("#largeImgContainer").empty();
$('#showImg').click();
$("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow');

// here 'this' refers to the imgZoom element that was clicked
var nextElement = $(this).next('.imgZoom'); 
img.click(function() {
    nextElement.click(); // trigger the click
});
...
0 голосов
/ 21 февраля 2012

Я сам совершил ту же ошибку, но .next () так не работает. Он возвращает элемент, который находится сразу после текущего элемента в DOM , только если соответствует селектору, в противном случае он не возвращает элементов.

Если вы хотите, чтобы первый элемент, следующий за текущим выбранным элементом в DOM, который соответствует определенному селектору, вы можете использовать что-то вроде этого: 

$('#zoom' + nextImage + '-tb').nextAll('.nextImg:first').click();
0 голосов
/ 21 февраля 2012

next() возвращает только следующий элемент в DOM (элемент, который находится сразу после него), вы можете сделать 

  //this gets the DOM element
  var nextImg = $('#zoom' + nextImage + '-tb').nextAll('.nextImg')[0];
  //wrap this in jQuery and click it
  $(nextImg).click();

Взято из документов

Учитывая объект jQuery, который представляет набор элементов DOM, Метод .next () позволяет нам осуществлять поиск по следующим брат этих элементов в дереве DOM и построить новый JQuery объект из соответствующих элементов.

Метод дополнительно принимает выражение селектора того же типа что мы можем перейти к функции $ (). Если сразу после брат соответствует селектору, он остается во вновь построенном объект jQuery; в противном случае это исключено.

...