代码之家 › 专栏 › 技术社区 › Karlom

不能在委托事件处理程序中选择第二个动态DIV

jquery-selectors jquery

Karlom · 技术社区 · 7 年前

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>

1 回复 | 直到 7 年前

Tobias Geiselmann 7 年前

[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>