0

I am using jquery tabs. On each tab, there is a "edit" button which hides the standard text and shows a input box.

Problem is, both tabs are affected. I know I can use different classes for each (edit1, edit2, etc.) but what if I have a lot of tabs?

Sample: http://jsfiddle.net/mgjTD/

What is a good way of handling this?

$(document).ready(function() {

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

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

    $('.view_go').click(function(){
        $('.view').show();
        $('.edit').hide();
    });
});
Josh
  • 605
  • 2
  • 8
  • 16

1 Answers1

1

You can fix it using .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();
});

Demo: http://jsfiddle.net/ThiefMaster/mgjTD/6/

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • In you sample, .view_go does not work. When I add this code, it doesn't work for me at all. Any advice? – Josh Apr 12 '12 at 06:49
  • @Josh In that example jquery is looking for `.view_go` elements siblings, but it doesn't have siblings since it is alone inside parent element. The `.view_go` click event should perhaps target the parent element which does have siblings. i.e. http://jsfiddle.net/lollero/mgjTD/5/ – Joonas Apr 12 '12 at 07:00
  • Very odd, I am getting absolutely no errors but none of the "edit" clicks are working. I don't eve know where to begin, my JS file is a few hundred lines. I've tried putting the JS inside the HTML and that didn't work. – Josh Apr 12 '12 at 07:13
  • @Josh In such cases you better check out the lines related to the edit button and see if what you are trying to target, actually exists. To help out you should use `console.log( )` and firebug console should tell you what that element is. For example inside the click event you'd put: `console.log( $(this).parent() )` if that is what you're trying to target. – Joonas Apr 12 '12 at 07:25
  • Thanks very much. I will try that and report back hopefully tomorrow. – Josh Apr 12 '12 at 07:29