点击文本无法切换对应垂直滑块图片的问题求助

我实现了左侧文本、右侧图片的布局，期望点击文本时切换垂直滑块中对应的关联图片，但功能无法正常生效。以下是使用的Razor视图代码与JavaScript代码，未能定位问题根源，怀疑可能与JavaScript选取的DOM元素有关：

原Razor视图代码 #

@foreach (var item in Model.NewsList)
{
    if (item.Title != null)
    {
        var ImagePathLarge = item.ImagePathWithoutExtension + "/" + item.ImageNameWithoutExtension + "_large" + item.Extension;
        var ImagePathSmall = item.ImagePathWithoutExtension + "/" + item.ImageNameWithoutExtension + "_small" + item.Extension;

        <div class='@(i != 0 ? "hidden" : "") vertical-rotator-min active col-item-vertical-rotator-@Model.ModuleInstanceId'>
            <div class="col-md-12" id="vertical-rotator-desk">
                <!-- vertical rotator image -->
                <div class="col-md-8 no-padding col-vertical-rotator-image-@Model.ModuleInstanceId">
                    <div class="vertical-rotator-fix-img">
                        <div style="background-image:url('@ImagePathLarge')" class="img-size-sb"></div>
                        <p class="description-vertical-rotator-text">@item.ShortDescription</p>
                    </div>
                </div>

                @foreach (var descriptionList in Model.NewsList)
                {
                      <div class="col-md-12">
                            <!-- vertical rotator image -->
                          <div class="col-md-4 col-vertical-rotator-text-@Model.ModuleInstanceId dsc-vertical-rotator">
                              <div class="fix-vertical-rotator">
                                  <p class="description-vertical-rotator">@descriptionList.ShortDescription</p>
                              </div>
                          </div>
                        </div>
                }
            </div>
        </div>
    }
    i++;
}

原JavaScript代码 #

document.addEventListener("DOMContentLoaded", function () {
    const textElements = document.querySelectorAll(".description-vertical-rotator");
    const sliderImages = document.querySelectorAll(".img-size-sb");

    textElements.forEach((textElement, index) => {
        textElement.addEventListener("click", function () {
            if (sliderImages[index]) {
                // 隐藏所有滑块图片
                sliderImages.forEach((image) => {
                    image.style.display = "none";
                });

                // 显示对应图片
                sliderImages[index].style.display = "block";
            }
        });
    });
});

问题根源分析 #

1. DOM元素数量不匹配：外层循环遍历NewsList生成图片滑块项，每个滑块项内又嵌套遍历NewsList生成所有文本，导致textElements的数量是NewsList长度的平方，而sliderImages数量仅等于NewsList长度，索引对应关系完全错误。
2. 重复ID与隐藏元素干扰：id="vertical-rotator-desk"在每个滑块项中重复生成，违反ID唯一性规则；同时除第一个滑块项外其余均默认隐藏，JS仍会选中隐藏项内的元素，导致逻辑混乱。
3. 直接修改样式的局限性：通过style.display控制显示隐藏，未利用CSS类进行统一管理，易与原有样式冲突。

修复方案 #

1. 重构Razor结构，消除嵌套循环 #

将图片滑块与文本触发区分开，确保每个文本元素对应唯一的图片索引，避免重复渲染：

@{ int i = 0; }
<!-- 图片滑块容器 -->
<div class="vertical-rotator-images">
    @foreach (var item in Model.NewsList)
    {
        if (item.Title != null)
        {
            var ImagePathLarge = item.ImagePathWithoutExtension + "/" + item.ImageNameWithoutExtension + "_large" + item.Extension;
            <div class='@(i != 0 ? "hidden" : "") img-size-sb-container'>
                <div style="background-image:url('@ImagePathLarge')" class="img-size-sb"></div>
                <p class="description-vertical-rotator-text">@item.ShortDescription</p>
            </div>
        }
        i++;
    }
</div>

<!-- 文本触发区 -->
<div class="vertical-rotator-texts">
    @foreach (var descriptionList in Model.NewsList.Select((item, idx) => new { Item = item, Index = idx }))
    {
        <div class="col-md-12">
            <div class="col-md-4 col-vertical-rotator-text-@Model.ModuleInstanceId dsc-vertical-rotator">
                <div class="fix-vertical-rotator">
                    <p class="description-vertical-rotator" data-index="@descriptionList.Index">@descriptionList.Item.ShortDescription</p>
                </div>
            </div>
        </div>
    }
</div>

2. 修正JavaScript逻辑，基于索引精准匹配 #

利用data-index属性明确文本与图片的对应关系，使用CSS类控制显示隐藏：

document.addEventListener("DOMContentLoaded", function () {
    const textElements = document.querySelectorAll(".description-vertical-rotator");
    const sliderImageContainers = document.querySelectorAll(".img-size-sb-container");

    textElements.forEach(textElement => {
        textElement.addEventListener("click", function () {
            const targetIndex = parseInt(this.dataset.index);
            // 隐藏所有图片容器
            sliderImageContainers.forEach(container => {
                container.classList.add("hidden");
            });
            // 显示对应索引的图片容器
            if (sliderImageContainers[targetIndex]) {
                sliderImageContainers[targetIndex].classList.remove("hidden");
            }
        });
    });
});

3. 补充CSS类定义 #

确保hidden类生效：

.hidden {
    display: none !important;
}

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