페이지로드시 양식 위치 변경

Question

좋아, 이전에 보았으므로이 작업을 수행 할 수 있음을 알고 있습니다. 그러나 나는 그것이 작동하도록하는 방법을 모른다. 나는 어디에서나 대답을 찾았다.

내가 필요한 것은 페이지의 3 개의 다른 지점에서 페이지가로드 될 때 양식이 임의로 변경되는 것입니다. [다음] [다음]

.... 그래서 예를 들면 [여기]

모든 형태의로드 할 수 가능한 지점 수 있지만, 수 만로드 될 때마다 1 위이다. 나에게 어떤 도움이 필요한 정보인지 모르겠다. 나는 지금 내 양식을 줄 것이다.

<form name="inputt" action="" method="post"> 
    <div align="center"> 
    <input type="submit" class="catch" value="Catch Pokemon" name="catch"> 
    </div> 
</form> 

더 자세히 알아 보려면

Answer 1

그냥 내 생각이지만 3 가지 위치 클래스에 CSS를 쓸 수 있으며 'position1', 'position2', 'position3'과 같은 것으로 부를 수 있습니다. 그런 다음 자바 스크립트 (또는 PHP)에서 페이지로드시 원할 경우 1에서 3 사이의 난수를 생성하고 "position"+randomNumber 클래스를 요소에 추가하면 해당 위치 중 하나에있게됩니다. 이는 임의의 배경 이미지에 사용 된 기법과 유사합니다.

업데이트 또한

, 당신은 위치에 대한 더 자세한 설명 클래스 이름을 사용하려는 경우, 당신은 클래스 이름에 숫자의 매핑을 유지 (또는 배열의 위치 같은 것을 사용) 수에 적용 할 클래스에 임의의 숫자를 연결하십시오.

코드

CSS :

<style> 
    .position1 { 
     // Whatever style you want for position 1 
    } 
    .position2 { 
     // Whatever style you want for position 2 
    } 
    .position3 { 
     // Whatever style you want for position 3 
    } 
</style> 

JS :

$(document).ready(function() { 
    var randomIndex = Math.floor(Math.random()*3)+1; //3 is the number of options you have; +1 makes the range 1 - 3 instead of 0 - 2 
    $('#my-form').addClass('position'+randomIndex); //Adds the new class the element with id = 'my-form' 
} 

Answer 2

페이지 새로 고침을 "로드"한다는 것은 쿠키 또는 다른 메커니즘에서 이전 위치를 유지해야한다는 것입니다. 양식의 마지막 위치를 기반으로 다음 위치를 결정할 수 있습니다.

양식이 ajax 호출을 기반으로 다시로드되는 경우 var를 사용하여 양식의 이전 위치를 저장하고 var의 값을 확인하여 다음 위치를 이전과 같게 만들 것을 권합니다. 양식을로드 할 때마다 위치는 이전에 사용 된 표시 위치를 저장하기 위해 어레이를 사용하는 것보다 고유해야합니다.

HTH.