javascript：仅当父元素处于活动状态且子元素具有特定类时，如何向子元素添加属性？答案

【问题标题】：javascript: how to add an attribute to a child element ONLY if a parent element is active AND child element has a certain class?javascript：仅当父元素处于活动状态且子元素具有特定类时，如何向子元素添加属性？
【发布时间】：2015-09-12 17:54:40
【问题描述】：

我正在尝试使用 2 个单排滑块而不是 1 个两排滑块重新创建一个网格轮播滑块，

因为我只想突出显示“居中”和“活动”的单个元素，并且在两行滑块中，2 个元素是“居中”和“活动”。

我遇到了两个问题，因为坦率地说我的 javascript 不是那么好。

看看这支笔 [http://codepen.io/mathiasvanderbrempt/pen/zGpGvd

js: $('.carousel:focus .frame.slick-center').css('border', '1px solid red');

第二个问题：

这将与滚动方向的事件侦听器一起使用，以使滑块“聚焦”以允许使用方向箭头（左和右）。含义：如果我按向上箭头，窗口会向上移动（或者你可以取消它吗？）并且活动滑块将是最上面的，从而能够使用向左箭头和向右箭头直接导航，反之亦然. [1]:http://codepen.io/mathiasvanderbrempt/pen/zGpGvd

【问题讨论】：

= active 是什么意思？这是一个保存活动元素的全局变量吗？
活动元素中是否添加了类？
请展示您尝试的 JS，并解释您遇到的 2 个问题？如果我们能解释你哪里出错了，你会学得更好。
我尝试了不同的方法，但没有记录每一次尝试。这是我最近的尝试，我知道要写什么，但似乎经常犯语法错误.. $('.carousel').object.hasFocus(function()) { $('.slick-center').attr('background', 'red'); } else { false } });
请在问题中输入代码以便阅读

标签： javascript jquery syntax slickgrid

【解决方案1】：

使用 CSS，而不是 jQuery：

.carousel:focus .frame.slick-center {
    background-color: red;
}

【讨论】：

您确定活动轮播有焦点吗？
这可能是问题所在。如果我在选择器活动上给它一个 css 属性，它会在点击时显示更改。但它在使用活动时没有显示变化，但它确实将焦点放在顶部或底部滑块上，因为我一次只能控制 1 个方向..
我确实在 codepen 上找到了这个，这可能是解决方案。 link
我为此做了一支笔：codepen.io/mathiasvanderbrempt/pen/zGpGvd 现在我只需要一种方法将 css 应用到 .frame.slick-center 类
您需要将代码放入事件处理程序中。此外，它可能应该从所有其他帧中删除红色背景。