0

これが私が理解しようとしている素敵で興味深い問題です：

3 列と 8 行を含むテーブルがあります。テーブルは PHP 経由で動的に生成されます。各 td には、列をマークする ID 1、2、または 3 のボタンがあります。各ボタンには、通常、クリック、およびホバーの 3 つの状態/スタイルがあります (すべて異なるスタイル、合計 9 つのスタイル)。

これまでのところ、css を使用して、分離された各セルに通常のスタイルとホバー スタイルを与えることができました。また、クリックされたセルのクラスをクリックされたスタイルに変更する jquery スクリプトを作成しました。問題は、1 つの行内でセル スタイルを設定すると、その行の残りの 2 つのセルを通常のスタイルに戻すことです。

左-通常中クリック右-通常
左クリック中-通常 右-通常
左-通常 中-通常右クリック
...

しかし、その行でのみ。

これまでの私のコードは次のとおりです。

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 に答える