jquery - jquery 显示隐藏以在选项卡中编辑

Question

我正在使用 jquery 选项卡。在每个选项卡上，都有一个“编辑”按钮，它隐藏标准文本并显示一个输入框。

问题是，两个选项卡都受到影响。我知道我可以为每个类（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();
    });
});

Answer 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/