[ jQuery ] 제이쿼리 기초, 클릭 이벤트 기초 연습

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="fruit">
  <div class="banana">
    <button type="button" class="btn">BANANA</button>
  </div>
  <div class="apple">
    <button type="button" class="btn">APPLE</button>
  </div>
  <div class="orange">
    <button type="button" class="btn">ORANGE</button>
  </div>
</div>

.fruit {
  display:flex;
}

.fruit > div {
  margin-left:30px;
}
.fruit > div > .btn {
  height:50px;
  width:100px;
  background-color:gold;
  border:none;
  cursor:pointer;
}

console.clear();

// 문제 : 엘리먼트를 3개 만들고 각각을 클릭하면 서로 다른 경고창 내용이 나오도록 해주세요.
// 조건 : 사단장 변수 없이 진행해주세요.

// 방법 1.
$('.fruit > .banana > .btn').click(function(){
  alert("I'm BANANA ,,,,,");
});

$('.fruit > .apple > .btn').click(function(){
  alert("I'm apple !!!!!! ");
});

$('.fruit > .orange > .btn').click(function(){
  alert("난 오렌지야 ^^ .....");
});


//방법2.
var banana = function() {
  console.log('안녕. 나는 바나나란다.');
}
$('.fruit > .banana > .btn ').click(banana);

var apple = function() {
  console.log('나는 사과.....');
}

$('.fruit > .apple > .btn ').click(apple);

var orange = function() {
  console.log("I'm Orange...!!!");
}
$('.fruit > .orange > .btn').click(orange);