Question

这是我想弄清楚的好问题：

我有一个包含3列和8行的表。表是通过PHP动态生成的。每个td都有一个ID为1,2或3的按钮，标记列。每个按钮有3种状态/样式 - 正常，单击和悬停（所有不同的样式，总共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

尝试：

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');           
        })
};

表格单元格使用jquery进行图像处理

2 个答案: