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+)/);

该列将位于 index 1，行将位于 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]+)基本意思是：取字符串后面的一个或多个数字的序列，row前面有一个不是单词字符或字符串开头的字符（在本例中为类属性），这样 row[0-9]+ 类甚至可以在属性的开头。从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正则表达式采用第二个（右一个）），按顺序排列。

发布的另一个解决方案 ( 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 回答