Question

我现在尝试了很多选项！

我有一组包含缩略图的元素，由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();
    });

在这里，我可以确定最初点击以打开此图像的元素的ID

我希望$('#zoom' + nextImage + '-tb').next('.nextImg').click();找到该元素，然后找到类nextImg的下一个元素并点击它

但它不起作用......我错过了什么？

Answer 1

next()只返回DOM中的下一个元素（紧随其后的元素），你可以做到

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

取自文档

给定一个表示一组DOM元素的jQuery对象，   .next（）方法允许我们通过紧接着搜索   这些元素在DOM树中的兄弟姐妹并构造一个新的jQuery   来自匹配元素的对象。

该方法可选地接受相同类型的选择器表达式   我们可以传递给$（）函数。如果紧接着   兄弟姐妹匹配选择器，它保留在新构造的   jQuery对象;否则，它被排除在外。

Answer 2

您应该能够将点击附加到动态创建的图像元素，以触发对下一个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
});
...

Answer 3

我自己犯了同样的错误，但是.next（）不会那样。它的作用是返回紧跟DOM 中当前元素之后的元素，只有当与选择器匹配时，否则它不返回任何元素。

如果你想在DOM中当前所选元素之后的第一个元素与特定选择器匹配，你可以使用类似这样的东西：

$('#zoom' + nextImage + '-tb').nextAll('.nextImg:first').click();

Answer 4

很难理解你想要什么，你的单词和代码之间存在差异。

也许这一行

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

这样可行：

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

我不明白的地方：'-tb'的用法 - 它在哪里是id的一部分而在哪里没有？你为什么打电话给.next（'。nextImg'）？我以为你想点击下一个imgZoom元素。在您的代码中，只有largeImgContainer中的（单个）图像具有nextImg类。

Answer 5

哎呀!!

以上都没有，但感谢您的帮助。

我最终创建了一个图像数组并传递了位置，因此下一个图像点击将打开数组中下一个位置的文件。

使用jQuery从代码中指定的元素中选择具有给定类的下一个元素

5 个答案: