jQuery 연습문제 3 ( 색 변경 )

• 색 변경 실습

.area{
   width: 100px;
   height: 100px;
   border: 1px solid black;
   box-sizing: border-box;
}

.inputColor{
   box-sizing: border-box;
   width: 100px;
   padding: 0;
   margin : 0;
   outline: none;
}

.div2{
   display: inline-block;
}

.box{
  display: inline-block;      
}

• 1) 색 변경 버튼(#btn1)을 클릭했을 때, 입력(#input1) 한 값으로 사각형(#box1) 배경색 변경

<div class="area" id="box1"></div>
<input type="text" class="inputColor" id="input1"><br>
<button type="button" id="btn1">색 변경</button>

$("#btn1").on("click", function(){
  $("#box1").css("backgroundColor", $("#input1").val());
})

See the Pen 24-12-25 jquery pr3 by Namu (@Namu-the-sans) on CodePen.

---

• 2) 색 변경 버튼(#btn2)을 클릭했을 때, 입력(.input2) 한 값으로 사각형(.div2)마다 배경색 변경

<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>

<div>
   <input type="text" class="inputColor input2">
   <input type="text" class="inputColor input2">
   <input type="text" class="inputColor input2">
   <input type="text" class="inputColor input2">
   <input type="text" class="inputColor input2">
   <input type="text" class="inputColor input2">
</div>

<button type="button" id="btn2">색변경</button>

$("#btn2").on("click", function(){
  const divArr = $(".div2");
  const inputArr = $(".input2");
  
  for(let i=0; i<divArr.length; i++){
     $("divArr[i]").css("backgroundColor", $("inputArr[i]").val());
  }
})

See the Pen 24-12-25 jquery pr4 by Namu (@Namu-the-sans) on CodePen.

---

• 3) 입력(.input3) 한 값으로 사각형(.div3)마다 배경색 바로 변경
  

<div class="box">
   <div class="area div3"></div>
   <input type="text" class="inputColor input3">
</div>
<div class="box">
   <div class="area div3"></div>
   <input type="text" class="inputColor input3">
</div>
<div class="box">
   <div class="area div3"></div>
   <input type="text" class="inputColor input3">
</div>
<div class="box">
   <div class="area div3"></div>
   <input type="text" class="inputColor input3">
</div>
<div class="box">
   <div class="area div3"></div>
   <input type="text" class="inputColor input3">
</div>
<div class="box">
   <div class="area div3"></div>
   <input type="text" class="inputColor input3">
</div>

$(".input3").on("input", fucntion(){
  
  /* for문 사용(2번 풀이와 동일)
  const divArr = $(".div3");
  const inputArr = $(".input3");
  
  for(let i=0; i<divArr.length; i++){
     $(divArr[i]).css("backgroundColor", $(inputArr[i].val());
  } */
  
  // prev() 사용
  $(this).prev().css("backgroundColor", $(this).val());
  
})

See the Pen 24-12-25 jquery pr5 by Namu (@Namu-the-sans) on CodePen.