jQuery 20180806

by Kim Ara

HTML

<section>
  
  <ul>
    <li>
    <a href="#none"><img src="https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/home/%EA%B5%AC%EB%A7%A4%EC%83%81%EB%8B%B4_0419.jpg.img.300.jpg" alt=""></a>
    </li>
    <li><a href="#none"><img src="https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/home/%EC%9D%B4%EB%8B%AC%EC%9D%98%ED%94%84%EB%A1%9C%EB%AA%A8%EC%85%98419.jpg.img.300.jpg" alt=""></a></li>
    <li><a href="#none"><img src="https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/owner/jeepcare/jeep%20care_0504.jpg.img.300.jpg" alt=""></a></li>
    <li><a href="#none"><img src="https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/home/mppromo_0717.jpg.img.300.jpg" alt=""></a></li>
  </ul>
  
</section>

CSS

section{text-align:center}
li{display:inline-block;list-style-type:none;width:24%}
li img{width:100%}
p{text-align:center;}

JavaScript

// 클릭이 가능한 이미지 4개
// 5~10% 랜덤 할인
// 클릭시 이미지 아래에 랜덤 할인 텍스트
// 다시 클릭하면 기존 메세지 사라지고 새로운 메세지 표시



$('ul li').click(function(){

  $('section p').remove();
  
	var discount = Math.floor((Math.random()*5)+5);
	var discount_msg = "<p>Discount is "+ discount +"%</p>";

  $('section').append(discount_msg);  
  
  // 이미지 한번 클릭하면 그대로 클릭이벤트 해제
	$('ul li').each(function(){
  	$(this).off('click');
  
  });

});