使用 jQuery 进行响应式填充答案

【问题标题】：Responsive padding with jQuery使用 jQuery 进行响应式填充
【发布时间】：2018-04-30 05:51:37
【问题描述】：

我在 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 个较小的瓶子没有正确的填充，但是如果我单击另一个打开它，一切正常。

有人可以帮我吗？

【问题讨论】：

首先记录变量 altezzaRecipiente 和 altezzaOlio。您会惊讶地看到 height() 有多少次不是您所期望的。这可能是因为与不同的事物有关。使用警报或控制台检查这两个变量的值。

标签： jquery click padding

【解决方案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();

【讨论】：

你说得对，就是这么简单，没想到。