jQuery的+ Z-索引增量

可能重複：
Jquery Draggable + Bring to Front jQuery的+ Z-索引增量

我有一個網站，用戶可以打開一些聊天窗口。

我需要保持最新的窗口，在上面，我使用以下

 var chatZIndex = 100; 
     $(document).on('mousedown','div.chatMessenger', function() { 
      $(this).css('z-index', chatZIndex++); 
     });

這工作得很好，但我已經找到了一個錯誤。如果有6個聊天框打開（6個'div.chatMessenger'），則變量chatZIndex一次增加6。 4打開，然後增加4等等。

有沒有一種方法可以使用這個相同的設置，但每次只有變量增量爲1，而不管有多少個'div.chatMessenger'實例打開？

THX

這是當前代碼設置它們

var memberID = 1000000000;   // This is the Member ID - REPLACE 
var chatMsgTop = 45;      // Initial Chat Open Location Top 
var chatMsgLeft = 45;      // Initial Chat Open Location Left 
var chatZIndex = 100;      // Starting Number for Chat Messenger z-index Value 

// Chat Messenger - Open a New Chat Messager IM Box 
$(document).on('click','div#chatFriendsContainer table tr', function() { 

    memberID++;  // This is the Member ID - REPLACE 

    // Increment Initial Chat Messaging Location on Windows - Avoid Overlap 
    chatMsgTop += 10; 
    chatMsgLeft += 10; 

    var timeStamp = Math.round((new Date()).getTime()/1000);                               // Timestamp 
    $('div#chatWrapper').append('<div id="'+memberID+'" class="chatMessenger" data-timestamp="'+timeStamp+'"></div>');   // Create new Chat IM Container 
    $('div#chatMessengerTemplate div.chatMessengerContainer').clone().appendTo('div#'+memberID);              // Clone Template 
    $('div#'+memberID).css({left : chatMsgLeft+'px', top : chatMsgTop+'px'});                        // Update IM Location 


    // JQUERY UI Draggable - Initialize 
    $('div#'+memberID).draggable({ 
     containment: $('div#chatWrapper') 
    }); 


    // JQUERY UI Draggable - Update Z-Index 
    $(document).on('mousedown','div.chatMessenger', function() { 
     //$('div.chatMessenger').not(this).css('z-index', '100'); 
     //alert('here now...'); 

     if($('div.chatMessenger', this)) { 
      $(this).css('z-index', chatZIndex++); 
     } 


    });

來源

2012-10-02 Adam

的http：// stackoverflow.com/questions/12665435/jquery-draggable-bring-to-front/12665480#12665480我碰巧看到昨天的同一個問題 – supernova

是的，但是這個解決方案的問題是，當您按順序打開聊天框時然後有時根據訂單b開始點擊各個盒子如果他們晚些時候被打開，oxes將會切換到其他位置。我知道這不是很好解釋，但它有點bug ... – Adam

將代碼塊移到// JQUERY用戶界面下Draggable - 更新Z-Index以外的聊天信使 - 打開一個新的聊天消息器IM Box塊 - 你每次點擊div＃chatFriendsContainer時都附加一個新的事件處理程序。這就是爲什麼你的Z指數增加#ammount點擊div＃chatFriendsContainer – supernova

我想你'添加2 mousedown回調到新創建的，所以它重複添加變量++。

你能提供更多我們可以檢查的代碼嗎？將更新下面你額外的代碼我的回答後

如何使用的.index（）

http://api.jquery.com/index/

或使用綁定的方法，以確保它只有做一次

來源

2012-10-02 01:41:00 fedmich

我懷疑你沒有正確地創建新的聊天窗口。如果你有這樣的事情，你的代碼應該可以正常工作：http://jsfiddle.net/thetext/VT8j8/。 - 你的聊天元素都是兄弟姐妹。

但是相反，我認爲你有這樣的事情：http://jsfiddle.net/thetext/F84Aa/。 - 您的聊天元素嵌套在前一個元素中。

來源

2012-10-02 01:38:44

我聽到你，但他們都居住在同一水平。注意：不管我點擊哪一個，我都會得到相同的增量。在你的例子中，較高級的增量減少...非常感謝這個想法... – Adam

此使用的 'ON' 功能

var chatZIndex = 100; 
$("body").on({"mousedown":function(event){ 
    $(this).css('z-index',chatZIndex).trigger("upZIndex"); 

},"upZIndex":function(event){ 
    chatZindex++; 
}},"div.chatMessenger",null);

來源

2012-10-02 01:39:09 DefyGravity

數據元素添加一個新的類一樣具有高得多的z-index的主動聊天比div.chatMessenger

$(document).ready(function(){ 

    $('div.chatMessenger').click(function(){ 

     // Find The Current Active Chat Window Then REmove The Class 
     $('.active-chat').removeClass('active-chat'); 
     // Assign THe active-chat class to the clicked div 
     $(this).addClass('active-chat'); 

    }); 

});

來源

2012-10-02 01:40:09

jQuery的+ Z-索引增量

回答

相關問題