Невозможно выбрать второй динамический div внутри обработчика события делегата.

Question

Я бы хотел изменить классы активных вкладок и комнат при нажатии chat-tab.Ожидается, что класс hidden будет удален из room, который не был нажат, а также добавлен в нерелевантные элементы div.

Проблема в том, что, что бы я ни пытался, я не мог заставить работать селекторы для комнат.

$('.chat-container').on('click', '.chat-tab', (function() {
  activeTab = $('body').data('activeTab');


  //working fine
  $('.chat-tab').removeClass("active");
  $('.chat-tab[data-tab="' + activeTab + '"]').addClass("active");

  var newActiveTab = $(this).attr("data-tab");
  $('body').data('activeTab', newActiveTab);

  //Do not work
  $('.rooms div[id!=' + newActiveTab + '_room]').addClass("hidden");
  $('.rooms div[id=' + newActiveTab + '_room]').removeClass("hidden");

}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-container">
  <!--dynamic tabs-->
  <ul class="nav nav-tabs" id="chat-bar">
    <li class="chat-tab room-tab active" data-tab="Public"><a data-toggle="pill">Public</a></li>
    <li class="chat-tab" data-tab="Sports"><a data-toggle="pill">Sports</a></li>
  </ul>
  <!--/tabs-->

  <!--dynamic rooms-->
  <div class="rooms">
    <div id="Public_room" class="room hidden">
      <ol id="Public_msgOl" >
        <li>dodo : Hi Pubilc</li>
      </ol>
    </div>

  <div id="Sports_room" class="room hidden">
    <ol id="Sports_msgOl" >
      <li>dodo : Whats up sportsmen?</li>
    </ol>
  </div>
</div>
<!--/rooms-->
</div>

Answer 1

Я не уверен, верно ли это для вашего случая, но поиск имени activeTab мне не помог.Однако настоящей проблемой был ваш выбор для чатов.Когда вы запрашиваете идентификаторы, вы должны заключить значение в кавычки, например: [id="value"].

$('.chat-container').on('click', '.chat-tab', function() {
  activeTab = $("ul .active").attr("data-tab");

  //working fine
  $('.chat-tab').removeClass("active");
  $('.chat-tab[data-tab="' + activeTab + '"]').addClass("active");

  var newActiveTab = $("ul .active").attr("data-tab");
  $('body').data('activeTab', newActiveTab);

  //Do work now
  $(".rooms div[id!='" + newActiveTab + "_room']").addClass("hidden");
  $(".rooms div[id='" + newActiveTab + "_room']").removeClass("hidden");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-container">
  <!--dynamic tabs-->
  <ul class="nav nav-tabs" id="chat-bar">
    <li class="chat-tab room-tab active" data-tab="Public"><a data-toggle="pill">Public</a></li>
    <li class="chat-tab" data-tab="Sports"><a data-toggle="pill">Sports</a></li>
  </ul>
  <!--/tabs-->

  <!--dynamic rooms-->
  <div class="rooms">
    <div id="Public_room" class="room hidden" data-pane="Public">
      <ol id="Public_msgOl" class="chat__messages">
        <li><strong class="msg">dodo : </strong>Hi there!</li>
      </ol>
    </div>

  <div id="Sports_room" class="room" data-pane="Sports">
    <ol id="Public_msgOl" class="chat__messages">
      <li><strong class="msg">dodo : </strong>Whats up?</li>
    </ol>
  </div>
</div>
<!--/rooms-->
</div>