Question

我有一个让我们说12张牌，4列和3行的网格。每列都有不同的类。第1列：有一个类a。第2列：有c类，依此类推c和d。

如果我使用a类循环遍历所有卡片，我可以知道它们的行位置，因为每个卡片的jquery都有一个索引。

我的问题是当有人点击一张卡时，我们可以说第二行第二行我们怎么能得到索引呢？我知道它在第二列，因为它有一个b类，但我怎么知道它是哪一行？

我需要的是一个数学函数，我可以传递，比如7（如果第7张牌被按下），它将返回2（因为它在第二行），而对于10，它将返回3。

我用了一个例子12张牌，但这个数学函数应该返回任意数量的牌。

Answer 1

在您的事件处理程序中，获取卡的索引idx，然后调用以下内容：

var rows = 3, cols = 4;
function getCoords(idx,rows,cols) {
    var rowval = Math.floor(idx/rows),
        colval = idx % cols; // modulo
    return [rowval,colval]; // ordered array
};

不要忘记idx从0开始计数，而不是一个，所以第7张卡应该有idx=6。

Answer 2

试试这个解决方案：javascript允许线程功能:) ...

你有类或id的数组，你循环获取类或id并使用示例。

 for(var key in Alerts){
        (function(key){                
             $("#"+key).on("click",function(){
                   alert(key);
             });
        })(key);
    }

这个例子。你应该将它用于你的代码:)，我的代码非常例子，当你知道如何在循环中存储密钥时，你可以很容易地看到你的问题..

示例：http://jsfiddle.net/v0Lhtwpe/2/

Answer 3

所以我们假设所有的卡都有一个类.card如果不是你应该在这里添加1就是你要做的事情，你可以用jQuery或JavaScript做到这一点

//Now first you want to create a variable of how many cards per row
//in this example we will set it manually to 4.
var cardsInRow = 4;
//function that calculates row position
function getCardRow () {
    //this will be the card clicked on
    //To use if jquery is enabled
    var index = $('.card').index(this);
    //to use if you want vanilla, and we will use a javascript array function
    //bind the .card query to use as this
    //now it will return the index of the card in the query as if it was an array.
    var index = [].indexOf.call(document.getElementsByClassName('card'), this);

    //now we add one to index since it's 0 based and return the row number   
    alert( Math.ceil( ++index / 4 ) );
}
//you can use javascript to do the click event
$('.card').on('click', getCardRow);
//or use javascript
var i = 0,
    cards = document.getElementsByClassName('card'),
    len = cards.length;

for (i = 0; i<len; i++) {
    cards[i].onclick = getCardRow
}

获取网格中的元素位置除以4

3 个答案: