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

Posted 2023-02-22

【中文标题】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?

【发布时间】：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 );

请在问题中输入代码以便阅读

【参考方案1】：

使用 CSS，而不是 jQuery：

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

【讨论】：

您确定活动轮播有焦点吗？

这可能是问题所在。如果我在选择器活动上给它一个 css 属性，它会在点击时显示更改。但它在使用活动时没有显示变化，但它确实将焦点放在顶部或底部滑块上，因为我一次只能控制 1 个方向..

我确实在 codepen 上找到了这个，这可能是解决方案。 link

我为此做了一支笔：codepen.io/mathiasvanderbrempt/pen/zGpGvd 现在我只需要一种方法将 css 应用到 .frame.slick-center 类

您需要将代码放入事件处理程序中。此外，它可能应该从所有其他帧中删除红色背景。