Jquery代码在下一个js中不起作用。显示出意想不到的结果，但要做出反应
Jquery代码在下一个js中不起作用。显示出意想不到的结果，但要做出反应
提问于 2022-07-05 14:43:17
我正在尝试实现一个ui需求。我想一次向子类div添加一个活动类名。第一，它将在第一个孩子中添加类，然后这个类将被移除并添加到第二个子div中。它将无限迭代。
下面是我在下一个js中的代码
$(".softwares_container").each(function () {
(function ($set) {
setInterval(function () {
var $cur = $set
.find(`.${st.active}`)
.removeClass(`${st.active}`);
//store inner html of current item
var $next = $cur.next().length
? $cur.next()
: $set.children().eq(0);
$next.addClass(`${st.active}`);
//store inner element of next item
//set inner html of current item to inner html of next item
var $next_inner = $next.children().eq(0);
setValue({
name: $next_inner.attr('alt'),
description: $next_inner.attr('data-info')
})
// setImage($next_inner.attr('src'))
}, 1000);
})($(this));
}); <div className={`softwares_container ${st.left_container}`}>
<div className={` ${st.img}`} alt="1">
<img src={ae.src} data-info="this is aftereffects" alt="After effects" />
</div>
<div className={st.img} alt="2">
<img src={pr.src} alt="Adobe Premiere pro" />
</div>
<div className={st.img}>
<img src={ps.src} alt="Adobe Photoshop" />
</div>
<div className={st.img}>
<img src={xd.src} alt="Adobe Xd" />
</div>
</div>但working.it并没有表现出意想不到的行为。反应很好。
有人能给我一个替代的解决方案或者告诉我如何解决这个问题吗？
这里有一个链接，你可以在这里看到意想不到的行为。https://diptnc.ml/about
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-05 19:02:02
您可以编写一个效果，以循环的方式为数组中的元素设置类名。
// Keep the interval id around so that
// it can be cleared when unsubscribing the effect.
let activeFxId;
/*
Applies active class to an array of HTMLElement in a round-robin manner.
*/
function activeFx(elements) {
activeFxId = setInterval(() => {
const elementsArr = [...elements];
let idx = elementsArr.findIndex((element) => {
return element.classList.contains('active');
});
if (idx === -1) {
idx = 0;
}
elementsArr[idx].classList.remove('active');
elementsArr[(idx + 1) % elementsArr.length].classList.add('active');
}, 2000);
return () => {
clearInterval(activeFxId);
};
}如何提供这个元素数组由您自己决定。一种方法是将ref存储到包含它们的父元素，并将其传递给函数。
例如,
/* Example component */
import React, {useEffect, useRef} from 'react';
export default () => {
const ref = useRef();
useEffect(() => {
if (ref.current && ref.current.children) {
return activeFx(ref.current.children);
}
});
return (
<div ref={ref}>
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72871335
复制相关文章
相似问题
腾讯云开发者
