如何用jQuery实现.render-inner.render-letter元素类名不间断自动切换

你只要把点击事件内的切换逻辑放到setInterval定时器中即可实现自动循环切换，可自行调整定时器的间隔时长控制切换速度，完整实现代码如下：

$(document).ready(function(){   
    // 缓存目标元素，避免重复查询DOM提升性能
    const $letterEl = $('.render-inner.render-letter');
    $letterEl.addClass('green');        
    const classes = ['red','blue','yellow','green'];
    let i = 0;

    // 1000为切换间隔，单位是毫秒，可根据需求调整
    setInterval(() => {
        $letterEl.removeClass(classes[i])
               .addClass(classes[ i = ++i % classes.length ]);         
    }, 1000);

    // 如果需要同时保留原有的点击切换功能，保留下面这段代码即可，不需要可以删除
    $letterEl.click(function(){
        $(this).removeClass(classes[i])
               .addClass(classes[ i = ++i % classes.length ]);         
    });
});

• 用setInterval定时器按照设定的间隔时间重复执行类切换逻辑，不需要手动触发任何事件
• 提前缓存目标DOM元素，不用每次执行切换都重新查询页面元素，运行效率更高
• 如果同时保留点击切换功能，点击操作会自动同步当前类的索引，不会出现自动切换和点击切换逻辑冲突的问题

内容的提问来源于stack exchange，提问作者Marijo