更改选择时更改 CSS答案

【问题标题】：Changing CSS when changing select更改选择时更改 CSS
【发布时间】：2015-06-19 00:06:10
【问题描述】：

目前正在运行。但我想知道为什么这不会影响.filteritem 中每个.container 的CSS。它只找到页面上的第一个，而我想在.filteritem 中更改所有.container。

$(document).ready(function () {
    $('#select').on('change', function () {
        if (this.value == 'alltopics') {
            $('.filteritem').fadeIn(500);
        } else {
            var elems = $('.filteritem[data-aa_eventtopic="' + this.value + '"]');
            $('.filteritem').not(elems).closest('.filteritem').fadeOut(500);
            elems.closest('.filteritem').fadeIn(500);

            //HERE
            $('.filteritem').each(function () {
                setTimeout(function () {
                    $('.container').filter(':visible').first().css({
                        borderTop: 'none',
                        paddingTop: '0px'});
                }, 501);
            });
        }
    });
});

【问题讨论】：

.first() 可能是这里的罪魁祸首。另外，从技术上讲，它看起来像是针对所有 .container 而不考虑其父级。也许你想要 $(this).find('.container')

标签： jquery select onchange

【解决方案1】：

我猜你只需要摆脱那个.first() 电话

【讨论】：

我只想影响第一个孩子。
然后你可以做 .children().first() ，因为 first() 将任何一组元素减少到第一个元素，不返回第一个子元素。

【解决方案2】：

注意 .first() 那里...

$('.filteritem').each(function() {
  setTimeout( function(){$('.container').filter(':visible').first().css({borderTop : 'none', paddingTop : '0px'});},501);        
});

您告诉它只针对第一个 .container，甚至不针对当前 .filteritem 中的容器。也许你打算这样做：

$('.filteritem').each(function() {
   setTimeout( function(){$(this).find('.container').filter(':visible').css({borderTop : 'none', paddingTop : '0px'});},501);        
});

** 更新 **

因为您只想要容器的第一个 CHILD：

$('.filteritem').each(function() {
   setTimeout( function(){$(this).find('.container').filter(':visible').children(':first').css({borderTop : 'none', paddingTop : '0px'});},501);        
});

【讨论】：

非常感谢！我通过组合它们来修复它。 elems.closest('.filteritem').fadeIn(250,function(){ $('.filteritem').each(function() { $(this).find('.container').filter(':visible ').first().css({borderTop : 'none', paddingTop : '0px'}); }); });