0

以下の私のコードを見てください：

     <div class="grid_6 box a col1 row1" style="left: 231px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box a col2 row1" style="left: 471px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box a col3 row1" style="left: 711px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box a col4 row1" style="left: 951px; top: 380px; position: absolute; "></div>
     <div class="grid_6 box b col1 row2" style="left: 231px; top: 540px; position: absolute; "></div>
     <div class="grid_6 box b col2 row2" style="left: 471px; top: 540px; position: absolute; "></div>
     <div class="grid_6 box b col3 row2" style="left: 711px; top: 540px; position: absolute; "></div>
     <div class="grid_6 box b col4 row2" style="left: 951px; top: 540px; position: absolute; "></div>

どの列とどの行をクリックしたかを判断するjqueryスクリプトを作成する必要があります。

これは簡単にできますか？

4

3 に答える 3

3

クリックハンドラーが上にあると仮定するとdiv...

var col_row = this.className.match(/col(\d+)\s+row(\d+)/);

列は index1に、行は index に配置されます2。

var col = col_row[1],
    row = col_row[2];

FWIW、あなたはFirefoxでこれを冷静に行います...

var [_, col, row] = this.className.match(/col(\d+)\s+row(\d+)/)
于 2012-07-17T22:50:37.973 に答える
1

このアドレスのjsfiddleにソリューションを投稿しました：http://jsfiddle.net/6GBPF/3/

ご覧のとおり、コードは非常に単純で、いくつかの基本的な正規表現を使用しています。 基本的には、単語文字または文字列の先頭 (この場合はクラス属性) ではない文字が前に(^|[^\w])row([0-9]+)ある文字列の後に、1 つ以上の数字のシーケンスを取得し、row[0-9]+ クラスrow属性の先頭に置くこともできます。関数の配列結果からmatch、最後の要素が探している要素です。列も同じように機能します。

$(document).ready(function(){
    $('.grid6').on('click', function(){
        var $div = $(this),
            rowMatch = $div.attr('class').match("(^|[^\w])row([0-9]+)"),
            row = rowMatch[rowMatch.length -1], 
            colMatch = $div.attr('class').match("(^|[^\w])col([0-9]+)"),
            col = colMatch[colMatch.length -1];
        alert("row: " + row + " - col: " + col);
    });
});

作業中のマークアップを生成するかどうかわからず、クラス属性が常に同じクラスを持つかどうかわからないという事実を考えると、次のようなクラス属性がある場合でも正規表現は機能しますthis: not_a_row1 row2(正規表現は 2 番目のもの (正しいもの) を取ります)、すべての順序で。

投稿された他の解決策 ( var col_row = this.className.match(/col(\d+)\s+row(\d+)/);) は、クラス属性が常にその正確な構造を持つことを前提としています。それほど慎重ではありませんが、それについて確信が持てれば、それは非常に簡潔で表現力豊かな解決策です。

于 2012-07-17T23:02:53.287 に答える
0

data-必要な正確なデータを簡単に取得できるため、属性を使用することをお勧めします。ただし、クラスを取得するには：

$('DIV').click(function(evnt){
    alert($(this).attr('class'));
});​
于 2012-07-17T22:52:33.767 に答える