显示 div onclick，添加类，在其他 div 上获取相同的过程答案

【问题标题】：Show div onclick, add class, and get the same process on other divs显示 div onclick，添加类，在其他 div 上获取相同的过程
【发布时间】：2019-04-20 16:25:14
【问题描述】：

如果单击带有模块 ID 的 div，该 div 将获得一个额外的类添加“活动”。有了这个额外的类，我使边框成为实心并显示具有相同模块的行。但我需要获得有关我的 jQuery 的帮助，所以同样的过程也适用于其他 div。

因此，如果单击下一个 div，则前一个单击并处于活动状态的 div 需要删除他的类（如此无效）并将他的行隐藏在下面。下一个选中的 div 需要得到与上一个相同的过程。

有人可以帮我将我掌握的信息放入下面的示例 jQuery 中吗？

//These are clickable images with dotted borders.
<div id="a-module" class="single_image series-border-dotted active">
<div id="b-module" class="single_image series-border-dotted">
<div id="c-module" class="single_image series-border-dotted">
<div id="d-module" class="single_image series-border-dotted">

//These rows are hidden on load. 
<div id="row-a-module">
<div id="row-b-module">
<div id="row-c-module">
<div id="row-d-module">

//jQuery what I have
$("#a-module").click(function(){
    $("#row-a-module").show();
    $(this).addClass("active");
});

//jQuery example that I maybe need.
$(".example").click(function(e) {
    e.preventDefault();
    $('.row').fadeOut('slow');
    $('#' + $(this).data('id')).fadeIn('slow');
});

//CSS
.series-border-dotted.active{border-style:solid!important;}

【问题讨论】：

标签： jquery html css

【解决方案1】：

将module 类添加到所有#*-module div。将类 row-module 添加到所有 #row-*-module div。

然后：

$('.module').click(function () {         // click on any module-div
    $('.module').removeClass('active');  // remove .active from all module-divs
    $(this).addClass('active');          // add .active to the clicked div

    $('.row-module').hide();             // hide all row-divs
    $('#row-' + this.id).show();         // show the corresponding row-div
});

【讨论】：