代码之家 › 专栏 › 技术社区 › rg88

在可变长度的元素网格中确定元素位置

switch-statement javascript php

0

rg88 · 技术社区 · 15 年前

我有一个元素数量可变的网格。假设每行5个图像和可变数量的图像。我需要确定每个图像在哪一列(因为没有更好的词)中…即1、2、3、4或5。

在此网格中,图像1、6、12和17将位于第1列,而4、9和15将位于第4列。

1  2  3  4  5 
6  7  8  9  10
12 13 14 15 16
17 18 19

我要做的是根据每个元素的列位置对其应用背景图像。

这是一个硬编码,不灵活,但工作完美的例子(如果我在这里找错了树,请告诉我你是如何理想地完成这项工作的,因为当我看到有人问“我如何建造一个镀金的太阳能喷气式飞机包,以到达这座大楼的顶部”时,它总是让我很恼火。当他们真正应该问“电梯在哪里?”时):

switch (imgnum){
                case "1" : case "6" : case "11" :
                    value = "1";
                    break;
                case "2" : case "7" : case "12" :
                    value = "2";
                    break;
                case "3" : case "8" : case "13" :
                    value = "3";
                    break;
                case "4" : case "9" : case "14" :
                    value = "4";
                    break;
                case "5" : case "10" : case "15" :
                    value = "5";
                    break;
                default :
                    value = "";
            }

            $('.someclass > ul').css('background','url("/img/'+value+'.png") no-repeat');

哦,更多信息…价值 imgnum 在该开关中,由单击事件确定。

3 回复 | 直到 15 年前

1

Emil Vikström 15 年前

对于这种类型的工作,使用模数运算符。模运算符给出整数除法的余数。模运算符是 % 在php和js中: http://php.net/manual/en/language.operators.arithmetic.php http://www.java2s.com/Tutorial/JavaScript/0040__Operators/Modulus.htm

您可以将整个代码块替换为:

value = imgnum % 5;
if(value == 0) { value = 5; }
$('.someclass > ul').css('background','url("/img/'+value+'.png") no-repeat');

2

1

dclowd9901 15 年前

$row_num = int($imgnum/5, PHP_ROUND_HALF_DOWN);

$column_num = (($row_num * 5) - $imgnum)*-1

3

1

Diodeus - James MacFarlane 15 年前

你可以使用 jQuery nth child selector ,假设您在客户机上执行此操作:

要匹配的每个子级的索引, 从1开始,字符串偶数或奇数或方程式(如 :nth child(偶数),:nth child(4n))

列号将是索引模块5。