以下のjqueryコードをより動的なコードに変更するにはどうすればよいですか？

Question

私は以下のようにサンプル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> 

JS：

$(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(); 
    }); 


}); 

CSS：

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

ここです210

どのような解決策やアイデアを歓迎します。

ありがとうございました。

Answer 1

ここは、開始する例です。 Updated Fiddle

注：私はすべての3 <a>にclass="click"を添加し、jQueryのセレクタとして使用しています。

$(document).ready(function() { 
 
    $('.wrap-chat-room').css('border', '1px solid red'); 
 
    $('#chat-joan').fadeIn(); 
 

 
    $(".click").click(function() { 
 
    var id = '#' + $(this).attr('id').replace('click', 'chat'); 
 
    $('[id^=chat]').fadeOut(); 
 
    $(id).fadeIn(); 
 
    }); 
 
});

.row { 
 
    padding: 0 2%; 
 
} 
 

 
.col-md-6 { 
 
    width: 46%; 
 
    padding: 2%; 
 
    float: left; 
 
} 
 

 
.chat-room { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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 class="click" 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 class="click" 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 class="click" 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>

Answer 2

使用クラスとデータパネルのdivに代わりの個々の部屋にクリックイベントを追加

$('[data-toggles]').on('click', function() { 
 
    var show = $(this).data('toggles'); 
 
    $(show).stop().fadeIn(); 
 
    $('.items').not(show).stop().fadeOut(); 
 
});

.items { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-toggles="#d1">One</button> 
 
<button data-toggles="#d2">Two</button> 
 
<button data-toggles="#d3">Three</button> 
 

 
<div id="d1" class="items">One</div> 
 
<div id="d2" class="items">Two</div> 
 
<div id="d3" class="items">Three</div>