Таблица манипуляция клетки изображений с JQuery

Question

Вот хорошая и интересная проблема, которую я пытаюсь выяснить:

У меня есть таблица, содержащая 3 столбцов и 8 строк. Таблица генерируется через PHP, динамически. Каждый td имеет в себе кнопку с идентификатором 1,2 или 3, обозначая столбцы. Каждая кнопка имеет 3 состояния/стили - Normal, clicked и hover (все разные стили, всего 9 стилей).

До сих пор мне удалось дать каждому отдельному стандарту ячейки и стиль наведения с помощью css, и я создал сценарий jquery, чтобы изменить класс щелкнутой ячейки до его щелканного стиля. Проблема заключается в том, когда я установил стиль ячейки в одной строке, я хочу две оставшиеся ячейки в этой строке, чтобы вернуться к нормальному стилю:

левый нормальный средний щелчок правой нормальной
левой кнопкой мыши средний нормальный правый нормальный
левый нормальный средний нормальный правой кнопкой мыши
...

Но только в этой строке.

Это мой код до сих пор:

function chooseItem(){ 

var left = $('#table td button#1'); 
    var middle = $('#table td button#2'); 
var right = $('#table td button#3'); 

     left.click(function() { 
      $(this).removeClass('LeftNormal'); 
      $(this).addClass('LeftClicked');   
     }) 

     right.click(function() { 
      $(this).removeClass('RightNormal'); 
      $(this).addClass('RightClicked');   
     }) 

     midle.click(function() { 
      $(this).removeClass('MidleNormal'); 
      $(this).addClass('MidleClicked');   
     }) 
}; 

Я красный много связанных с этим вопросов здесь, но ни один не имел подобную проблему. Заранее спасибо!

Answer 1

Вы хотите что-то вроде этого?

var $table = $('table'); 
    $table.find('button').click(function() { 
    $(this).addClass('selected').parent().siblings().find('button').removeClass('selected'); 
    });​ 

Нажмите, чтобы увидеть в действии: http://jsfiddle.net/8qLpm/

Answer 2

Try:

function chooseItem(){ 

var left = $('#table td button1.left'); 
    var middle = $('#table td button2.middle'); 
var right = $('#table td button3.right'); 

     left.click(function() { 
      $(this).closest('tr').find('button').removeClass('LeftNormal'); 
      $(this).addClass('LeftClicked');   
     }) 

     right.click(function() { 
      $(this).closest('tr').find('button').removeClass('RightNormal'); 
      $(this).addClass('RightClicked');   
     }) 

     midle.click(function() { 
      $(this).closest('tr').find('button').removeClass('MidleNormal'); 
      $(this).addClass('MidleClicked');   
     }) 
};