求助：每X秒按条件切换多类名及添加指定图片元素的问题

问题说明 #

现有脚本可随机修改所有class含"percent"的<div>类名（后缀为1-100随机值），但需要实现以下逻辑：

• 当随机值x>50时，找到id为"pp"容器下对应项的<a class="items">，改为<a class="items hot">，同时添加<img class="overlay-img" src="css/img/logo-hot.gif">元素
• 当x<50时，对应项改回<a class="items">并移除添加的图片

当前代码存在两个问题：仅修改pp容器下第一个子元素，且不知如何添加指定图片。

解决方案 #

原有代码的核心问题是操作对象错误（直接修改pp容器而非对应子元素），且缺少图片添加/移除逻辑。以下是修复后的完整代码：

修改后的HTML（结构不变）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="percent"></div>
<div id="pp" class="group_flex">
    <a class="items " href="#" onclick="go('daftar')"><img loading="lazy" class="gimg" src="img/18.webp" alt="Jagung" />  <div class="gname">Jagung</div><div class="percent52"></div></a>
    <a class="items " href="#" onclick="go('daftar')"><img loading="lazy" class="gimg" src="img/77.webp" alt="Semangka" />  <div class="gname">Semangka</div><div class="percent44"></div></a>
    <a class="items " href="#" onclick="go('daftar')"><img loading="lazy" class="gimg" src="img/109.webp" alt="Nanas" />  <div class="gname">Nanas</div><div class="percent59"></div></a>
</div>

修改后的JavaScript

setInterval(function() {
    $('div[class*="percent"]').each(function () {
        var $percentDiv = $(this);
        // 定位当前percent元素所属的父级a标签
        var $parentItem = $percentDiv.closest('.items');
        var x = Math.floor((Math.random() * 100) + 1);
        
        // 更新percent类名
        $percentDiv.attr('class', 'percent' + x);
        
        if (x < 50) {
            // 移除hot类，并删除已添加的overlay图片
            $parentItem.removeClass('hot');
            $parentItem.find('.overlay-img').remove();
        } else {
            // 添加hot类
            $parentItem.addClass('hot');
            // 检查是否已存在overlay图片，避免重复添加
            if (!$parentItem.find('.overlay-img').length) {
                $parentItem.append('<img class="overlay-img" src="css/img/logo-hot.gif" />');
            }
        }
    });
}, 2000);

// 保留原go函数（假设你已有该函数实现）
function go(target) {
    // 这里是原go函数的业务逻辑
}

关键修复点 #

• 精准定位元素：通过closest('.items')找到当前percent元素的父级a标签，确保操作的是对应项而非整个容器
• 图片管理逻辑：添加图片前先检查是否已存在，避免重复插入；x<50时同步删除图片，恢复初始状态
• 状态同步更新：每次生成随机值后，同步更新percent类名和对应a标签的状态

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