Question

我的jQuery中的代码有问题，我创建了一个简短的代码来测量在图像的顶部和底部添加的正确填充，我无法通过位置Absolute或Flex添加它但是它仅适用于第二次点击而不是第一次点击，这是代码：

$('.Scelta_olio').on('click', function(){
            var altezzaRecipiente = $(".Olio_non_cliccato").height();
            var altezzaOlio = $(".Olio_non_cliccato img").height();
            var paddingOlio = Math.floor((altezzaRecipiente - altezzaOlio)/2) + 'px';

            $(this).addClass('Olio_cliccato').removeClass('Olio_non_cliccato').find(".Attivazione_colonna_cliccata").delay(250).addClass("Attivata").animate({opacity: 1}, 1500);
            $('.Scelta_olio').not(this).addClass('Olio_non_cliccato').removeClass('Olio_cliccato').find(".Attivazione_colonna_cliccata").removeClass("Attivata").animate({opacity: 0}, 100);
            $('.Olio_non_cliccato .Immagine_bottiglia img').css({'padding-top': paddingOlio, 'padding-bottom': paddingOlio});
        });

我正在谈论的网站就是这个：www.poderinodelmadonnino.it，最后一节带有3个不同的瓶子。正如您在第一次点击时所看到的那样，其他2个较小的瓶子没有正确的褪色但是如果我点击另一个打开它，它一切正常。

有人可以帮助我吗？

Answer 1

首次加载页面时，您没有类Olio_non_cliccato的元素，因此height()会返回null。

您之后设置了类，因此在第二次单击时，您将获得元素的正确高度。

为了解决这个问题，当点击执行时，您的元素需要具有类Olio_non_cliccato。

这是你可以做的事情（没有测试它，因为你的延迟和动画可能无效）

$('.Scelta_olio').addClass('Olio_non_cliccato').removeClass('Olio_cliccato');
$(this).addClass('Olio_cliccato');
var altezzaRecipiente = $(".Olio_non_cliccato").height();
var altezzaOlio = $(".Olio_non_cliccato img").height();

用jQuery响应填充

1 个答案: