최신 게시물 랜덤색상 때문에 질문 드립니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
최신 게시물 랜덤색상 때문에 질문 드립니다.

QA

최신 게시물 랜덤색상 때문에 질문 드립니다.

본문

아래에 있는것이 랜덤 배경 색상 출력하는 소스인데 하나에만 적용이 됩니다.

메인에 최근 게시물 5개 사용 중인데 똑같은 최근게시물 스킨을 사용합니다.

그런데 하나만 색상이 변경되고 나머지 4개는 변경이 안됩니다.

어떻게 하면 최근 게시물 5개 다 색상 바뀌게 할수 있을까요?

 

 

 

 


<div id=bgDiv>내용<div>
 
 <script type='text/javascript'>
      // 0 ~ 1 까지의 난수를 생성하는 Math 객체의 random 메소드를 사용합니다.
      var sum = Math.random();
      // random 메소드로 생성된 난수에 ( 예: 0.335435 ) 10 을 곱해줍니다.
      var result = sum * 10;
      // 10을 곱한 난수를 ceil 메소드를 사용하여 올림 값으로 변경합니다.
      var resultUp = Math.ceil(result);
      // switch 문을 사용하여 랜덤으로 생성되는 1 부터 10 까지의 정수를 체크하여 배경을 지정 해줍니다.
      // 새로고침 할때마다 다른 색의 배경이 적용되며 색을 추가 할경우에는 case 를 늘려주시면 됩니다.
      var d = document.getElementById('bgDiv');
      switch ( resultUp ) {
        case 1 : d.style.background = "#E91B23";
        break;
        case 2 : d.style.background = "#3498DB";
        break;
        case 3 : d.style.background = "#8CC346";
        break;
        case 4 : d.style.background = "#F1C40F";
        break;
        default : d.style.background = "#553C7D";
        break;
      }
 </script>
 

이 질문에 댓글 쓰기 :

답변 4

아래의 bgDiv 가 모두 똑같이 적용되서 충돌이 나기 때문에 서로 다르게 id를 적용해주세요.

<div id=bgDiv>내용<div>

var d = document.getElementById('bgDiv'); 

그리고 사용하는 최근게시물 스킨을 다른이름폴더로 복사해서 다른 이름으로 개별로 스킨을 적용해주세요.

id값은 페이지 상에서 한번만 사용할 수 있기에 중복이 되어서 하나의 최근 게시물에만 적용이 되겠네요.

가장 간단하게 해결하는 방법은 현재의 최근 게시물 스킨을 4개를 복사하세요.

예를 들어서 latest_01이라는 최근 게시물 폴더의 내용을 4개 복사한 다면

latest_01 ~ latest_05로 되겠지요.

그런 다음에 소스 상에서

<div id=bgDiv>내용<div> 부분을

<div id="bgDiv_01">내용<div>

부터 <div id="bgDiv_05">내용<div>

까지 각각 수정해 주시고요.

 

var d = document.getElementById('bgDiv');

이 부분 소스도

var d = document.getElementById('bgDiv_01');

부터

var d = document.getElementById('bgDiv_05');

까지 수정하신 다음에

최근 게시물 적용하는 부분에서 스킨명을 latest_01부터 latest_05까지로 각각 지정해 주시면 될 것 같습니다. 

게시물 영역 div의 id를 선택해서 변경하지 말고 class를 만들어서 사용해 보세요/ 
<div id=bgDiv class=lastes>내용<div>
 
 <script type='text/javascript'>
      // 0 ~ 1 까지의 난수를 생성하는 Math 객체의 random 메소드를 사용합니다.
      var sum = Math.random();
      // random 메소드로 생성된 난수에 ( 예: 0.335435 ) 10 을 곱해줍니다.
      var result = sum * 10;
      // 10을 곱한 난수를 ceil 메소드를 사용하여 올림 값으로 변경합니다.
      var resultUp = Math.ceil(result);
      // switch 문을 사용하여 랜덤으로 생성되는 1 부터 10 까지의 정수를 체크하여 배경을 지정 해줍니다.
      // 새로고침 할때마다 다른 색의 배경이 적용되며 색을 추가 할경우에는 case 를 늘려주시면 됩니다.
      //var d = document.getElementById('bgDiv');
      switch ( resultUp ) {
        case 1 : $('.lastes').css('background', "#E91B23"); // 아래도 이와 같이
        break;
        case 2 : d.style.background = "#3498DB";
        break;
        case 3 : d.style.background = "#8CC346";
        break;
        case 4 : d.style.background = "#F1C40F";
        break;
        default : d.style.background = "#553C7D";
        break;
      }
 </script>

<style type="text/css">
.test {
   width:100px;
   height:100px;
}
</style>
<div id="div1" class="test"></div>
<div id="div2" class="test"></div>
<div id="div3" class="test"></div>
<div id="div4" class="test"></div>
<div id="div5" class="test"></div>
<script type="text/javascript">
Array.prototype.shuffle = function() {
   return this.concat().sort(function() {
      return Math.random() - Math.random();
   });
}
var nums = ["#E91B23", "#3498DB", "#8CC346", "#F1C40F", "#553C7D"];
var arr = nums.shuffle();
var classes = document.getElementsByClassName("test");
for(i=0; i<classes.length; i++) {
   classes[i].style.background = arr[i];
}
</script>

http://nyaongii.dothome.co.kr/temp/wrid_129507.html 

답변을 작성하시기 전에 로그인 해주세요.
전체 124,220 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT