2010-05-12 4 views
0

가변 개수의 요소 그리드가 있습니다. 행당 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 값은 click 이벤트에 의해 결정됩니다.

답변

1

이 유형의 작업에는 모듈러스 연산자를 사용하십시오. 모듈러스 연산자는 정수 나누기의 나머지를 제공합니다. 모듈러스 연산자는 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'); 
+0

아, 확인 될 것 – dclowd9901

+0

이것은 어디서 쉬운 경로입니까? 나는 그것이 그것을 해결하는 올바른 방법이라고 생각합니다. modulus 연산자는 PHP에서도 사용할 수 있습니다. 서버 측에서 처리하려면 (변수 앞에 달러 기호를 추가하면됩니다.) –

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

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

당신은 jQuery nth child selector을 사용할 수 있습니다, 당신이하고있는 가정 클라이언트의 경우 :

일치시킬 각 하위의 색인 1부터 시작하여 문자열 even 또는 홀수 또는 방정식 (예 : : n 번째 자녀 (심지어), :) 당신이 쉬운 도로를 탈하려면 n 번째 자녀 (4N))

열 수는 인덱스 모듈 5.

+0

이것은 약간 과잉입니다. PHP에 필요한 모든 도구가있을 때 다른 전체 라이브러리를 설치에 추가 할 필요가 없습니다. – dclowd9901

+0

그 결과는 또한 사실입니다 : PHP 자체는 브라우저에서 할 수있을 때 과잉입니다. –