实现鼠标悬停同类元素显示/隐藏信息块的jQuery问题求助

核心思路 #

放弃针对单个元素写固定事件，改为给所有.patente元素绑定通用事件，通过元素的id关联对应的.base_xxx信息块，实现可复用的悬停逻辑。

修改后的完整代码 #

HTML（结构可扩展，新增模块只需保持id与base类名对应）

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="box-p d-flex align-items-center">
    <div class="base_beginner base">
        <div class="base-info mx-auto">
            <p>0 ~ 50 Resets</p>
            <p>Pontos por reset: 600</p>
            <p>Nível para resetar: 400 | 380 | 370</p>
        </div>
    </div>
    <div id="beginner" class="patente d-table mx-auto mt-3">
        <div class="patente-name text-center text-uppercase font-weight-bold">Beginner</div>
        <img src="https://i.imgur.com/mDU8frm.png" alt="Beginner">
    </div>
    <div class="base_beginner base">
        <div class="base-info mx-auto">
            <b>Recompensas</b>
            <p>7 dias vip Godz</p>
            <p>1 set +9 excelent por 3 dias</p>
            <p>1 panda 3 dias</p>
        </div>
    </div>
</div>
<!-- 示例：新增等级模块 -->
<div class="box-p d-flex align-items-center">
    <div class="base_intermediate base">
        <div class="base-info mx-auto">
            <p>51 ~ 100 Resets</p>
            <p>Pontos por reset: 800</p>
            <p>Nível para resetar: 360 | 350 | 340</p>
        </div>
    </div>
    <div id="intermediate" class="patente d-table mx-auto mt-3">
        <div class="patente-name text-center text-uppercase font-weight-bold">Intermediate</div>
        <img src="https://i.imgur.com/example.png" alt="Intermediate">
    </div>
    <div class="base_intermediate base">
        <div class="base-info mx-auto">
            <b>Recompensas</b>
            <p>14 dias vip Godz</p>
            <p>1 set +10 excelent por 7 dias</p>
            <p>1 panda 7 dias</p>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

CSS（新增对应等级的base样式，保持结构统一）

.box-p {
    width: 100%;
    height: 199px;
    background: url(https://i.imgur.com/pwIWOae.png) no-repeat center;
    margin: 55px 0;
}

.base {
    text-align: center;
    display: none;
    align-items: center;
}

.patente-name {
    display: none;
}

/* Beginner 信息块样式 */
.base_beginner {
    width: 315px;
    height: 179px;
    background: url(https://i.imgur.com/OWJVG56.png) no-repeat;
}

/* Intermediate 信息块样式（示例新增） */
.base_intermediate {
    width: 315px;
    height: 179px;
    background: url(https://i.imgur.com/example-bg.png) no-repeat;
}

JavaScript（通用事件绑定，无需重复编写）

// 给所有.patente元素绑定悬停与移出事件
$(".patente").on("mouseover", function() {
    const currentId = $(this).attr("id");
    // 显示对应id的信息块
    $(`.base_${currentId}`).show();
    // 显示当前元素的名称
    $(this).find(".patente-name").show();
}).on("mouseleave", function() {
    const currentId = $(this).attr("id");
    // 隐藏对应id的信息块
    $(`.base_${currentId}`).hide();
    // 隐藏当前元素的名称
    $(this).find(".patente-name").hide();
});

关键改动说明 #

1. 移除冗余循环：原代码循环绑定事件会导致重复绑定问题，直接通过类选择器绑定一次事件，jQuery会自动处理所有匹配元素。
2. 动态关联元素：通过$(this).attr("id")获取当前悬停元素的id，拼接成对应信息块的选择器，实现精准控制。
3. 精准控制名称显示：用$(this).find(".patente-name")仅操作当前元素内的名称，避免影响其他模块。
4. 高扩展性：新增等级模块时，只需保持patente的id与base的类名（base_+id）对应，无需修改JS代码。

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