Javascript 如何将下面的jquery代码更改为更动态的代码？

我已经完成了如下示例jquery代码。我的问题是如何在动态代码中实现它

HTML:

<div class="row">
<div class="deal-mode col-md-6">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="click-joan" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Joan</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Content</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="click-kelvin" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Kelvin</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Content</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="click-may" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. May</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-6 wrap-chat-room">
  <div id="chat-joan" class="chat-room">
    <p>Chat With Joan</p>
  </div>
  <div id="chat-kelvin" class="chat-room">
    <p>Chat With Kelvin</p>
  </div>
  <div id="chat-may" class="chat-room">
    <p>Chat With May</p>
  </div>
</div>
</div>

$(document).ready(function(){
    $('.wrap-chat-room').css('border', '1px solid red');
  $('#chat-joan').fadeIn();
  $("#click-joan").click(function() {
    //alert(this.id);
    $('#chat-joan').fadeIn();
    $('#chat-kelvin').fadeOut();
    $('#chat-may').fadeOut();
    });

  $("#click-kelvin").click(function() {
    //alert(this.id);
    $('#chat-kelvin').fadeIn();
    $('#chat-joan').fadeOut();
    $('#chat-may').fadeOut();
    });

  $("#click-may").click(function() {
    //alert(this.id);
    $('#chat-may').fadeIn();
    $('#chat-kelvin').fadeOut();
    $('#chat-joan').fadeOut();
    });


});

.row { padding: 0 2%; }
.col-md-6 { width: 46%; padding: 2%; float: left; }
.chat-room { display: none; }

CSS:

<div class="row">
<div class="deal-mode col-md-6">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="click-joan" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Joan</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Content</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="click-kelvin" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Kelvin</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Content</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="click-may" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. May</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-6 wrap-chat-room">
  <div id="chat-joan" class="chat-room">
    <p>Chat With Joan</p>
  </div>
  <div id="chat-kelvin" class="chat-room">
    <p>Chat With Kelvin</p>
  </div>
  <div id="chat-may" class="chat-room">
    <p>Chat With May</p>
  </div>
</div>
</div>

$(document).ready(function(){
    $('.wrap-chat-room').css('border', '1px solid red');
  $('#chat-joan').fadeIn();
  $("#click-joan").click(function() {
    //alert(this.id);
    $('#chat-joan').fadeIn();
    $('#chat-kelvin').fadeOut();
    $('#chat-may').fadeOut();
    });

  $("#click-kelvin").click(function() {
    //alert(this.id);
    $('#chat-kelvin').fadeIn();
    $('#chat-joan').fadeOut();
    $('#chat-may').fadeOut();
    });

  $("#click-may").click(function() {
    //alert(this.id);
    $('#chat-may').fadeIn();
    $('#chat-kelvin').fadeOut();
    $('#chat-joan').fadeOut();
    });


});

.row { padding: 0 2%; }
.col-md-6 { width: 46%; padding: 2%; float: left; }
.chat-room { display: none; }

这是你的电话号码

欢迎提出任何解决方案或想法

---

谢谢。

以下是开始的示例

注意：我已将

class=“click”

添加到所有3个

内容

内容

内容

与琼聊天

与开尔文聊天

与梅聊天

使用类和数据属性

$（“[数据切换]”）。在（'click'，function（）上{
var show=$（this.data（'toggles'）；
$（show.stop（）.fadeIn（）；
$（'.items'）.not（show.stop（）.fadeOut（）；
});
.items{
显示：无
}

一个
两个
三
一个
两个
三个
将单击事件添加到面板div，而不是单个房间。您有任何示例可供参考吗？谢谢。普通班，把它们藏起来，然后展示活动的。嗨，普加什，谢谢你的帮助。是的，你解决了我的问题：）@JoeltonDingYingChor:欢迎，很乐意帮忙：-）