Javascript/JQuery Execution order

Javascript/JQuery Execution order

本文关键字：order Execution JQuery Javascript      更新时间：2023-09-26

我有多个div".gallery"实例，我想在单击时获取.gallery的特定实例所在的div的id。然后，这将填充一个变量，我可以使用该变量使图像仅在该div的库中更改。问题是页面似乎尝试进行图像交换，然后更改变量，因此图像在第一次点击时不会更改，更糟糕的是，当您第一次单击其他图库时，它会更改您与之交互的最后一个图库的图像。目前，每次您单击报告您单击的div 时，我都会弹出一个 javascript 警报。如果您想使用它，我这里有当前状态的页面。www.ryanscasey.com/redesign

直接的javascript如下：

$(document).ready(function() {
    var clickedDiv;
    $('.gallery').click(function() {
        clickedDiv = $(this).parent().parent().attr("id");
        $('#' + clickedDiv + ' .thumbs img').click(function() {
            $('#' + clickedDiv + ' .largeImage').html($(this).attr('alt'));
        });
        alert(clickedDiv);
    });
});

我认为这就是你想要的。听起来您不需要绑定多个单击事件。按照它的方式，它会在单击.gallery项时绑定单击事件。如果这不起作用，请告诉我，我们将尝试从那里开始工作。

$(document).ready(function() {
    $('.gallery .thumbs img').click(function() {
        var $this = $(this),
            $gallery = $this.closest('.gallery'),
            $large = $gallery.find('.largeImage');
        $large.html($this.attr('alt'));
    });
});

编辑：我看了一下你的网站，我已经调整了我的代码。您希望将单击事件绑定到缩略图而不是整个库。

相关文章：