0

这是我试图弄清楚的一个有趣而有趣的问题：

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

到目前为止，我已经设法通过 css 为每个分离的单元格提供正常和悬停样式，并且我创建了一个 jquery 脚本来将单击单元格的类更改为其单击样式。问题是，当我在一行中设置单元格样式时，我希望该行中剩余的两个单元格恢复正常样式：

left-normal中键单击right-normal
左键单击middle-normal 右键单击
​​ left-normal 中键单击
...

但仅限于那一行。

到目前为止，这是我的代码：

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

我这里有很多相关的问题，但没有人遇到类似的问题。先感谢您！

4

2 回答 2

1

你想要这样的东西吗？

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



点击查看实际操作：http : //jsfiddle.net/8qLpm/


于 2012-09-16T16:34:46.677 回答
0

尝试：

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');           
        })
};
于 2012-09-16T16:38:43.953 回答