2012-04-12 56 views
0

我正在使用jquery選項卡。每個選項卡上都有一個「編輯」按鈕,它隱藏標準文本並顯示輸入框。jquery show hide在標籤中編輯

問題是,兩個選項卡都受到影響。我知道每個人都可以使用不同的類(edit1,edit2等),但如果我有很多選項卡,該怎麼辦?

樣品:http://jsfiddle.net/mgjTD/

什麼是解決這個好辦法?

$(document).ready(function() { 

    $('#sometabs').tabs(); 

    $('.edit_go').click(function(){ 
     $('.view').hide(); 
     $('.edit').show(); 
    }); 

    $('.view_go').click(function(){ 
     $('.view').show(); 
     $('.edit').hide(); 
    }); 
}); 

回答

1

可以使用.siblings()修復:

$('#sometabs').tabs(); 

$('.edit_go').click(function() { 
    $(this).siblings('.view').hide(); 
    $(this).siblings('.edit').show(); 
}); 

$('.view_go').click(function() { 
    $(this).parent().siblings('.view').show(); 
    $(this).parent().siblings('.edit').hide(); 
}); 

演示:http://jsfiddle.net/ThiefMaster/mgjTD/6/

+0

在你品嚐,.view_go不起作用。當我添加此代碼時,它根本不適用於我。有什麼建議? – Josh 2012-04-12 06:49:15

+0

@Josh在那個例子中,jquery正在尋找'.view_go'元素的兄弟姐妹,但它沒有兄弟姐妹,因爲它在父元素中是獨一無二的。 '.view_go'點擊事件應該可以定位到具有兄弟姐妹的父元素。即http://jsfiddle.net/lollero/mgjTD/5/ – Joonas 2012-04-12 07:00:20

+0

固定它;現在嘗試 – ThiefMaster 2012-04-12 07:04:52