.split(',') : , 기호를 제외하여 값을 추출하기('')사이에 제거할 내용넣기
문제1: 박스 5개를 만들고, 입력창에서 입력한 숫자번쨰의 박스 테두리를 다른색으로 변경하기
문제2: 박스를 직접 클릭했을 때도, 박스 테두리를 다른색으로 변경하기
문제3: 입력창에 1,2,3과같이 ,(쉼표)를 이용하여 입력했을 때, 해당 박스테두리 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력예제</title>
<script src="../JS/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script>
$(function(){
$('#push').click(function(){
$('.container div').css('border','2px solid black')
// var value = $('#searchBox').val();
valueArr= $('#searchBox').val();
var valueArr=valueArr.split(',');
// value = parseFloat(value);
// if(isNaN(value) || value > 5 || value <= 0){
// //alert('잘못된 숫자입니다.')
// //$('.container div').css('animate__tada','2s') 애니메이션은 addClass로만해야한대
// return;
// }
// $('.container').children().eq(value-1).css('border','2px solid red');
for(i=0; i<valueArr.length;i++){
var value=valueArr[i];
// if(){} //여기다가 숫자나 글자같은거 안맞을때 어케할지 넣어야돼,
//지금은 안넣어서 범위 내 숫자 아니면 작동안하고, 인식할 수 있는 것만 작동함
$('.container').children().eq(value-1).css('border','2px solid red');
}
valueArr.splice(0);
})
$('.container div').click(function(){
$('.container div').css('border','2px solid black')
$(this).css('border','2px solid red')
})
})
</script>
<style>
.container div{border: 2px solid black; height: 50px; width: 50px;
float: left; margin: 20px 20px 0;}
</style>
</head>
<body>
<input type="text" id="searchBox">
<button id="push">입력</button>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
</html>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예제</title>
<script src="../JS/jquery.min.js"></script>
<style>
.box{
width: 100px; height: 100px; line-height: 100px; text-align: center;
border: 2px solid black; float: left; margin-left: 30px;
}
.container::after{
display: block; content: ''; clear: both;
}
.selected{
border-color: red;
}
.container{
margin-top:30px;
}
</style>
<script>
$(function(){
//버튼 클릭 이벤트를 등록
$('#btn').click(function(){
//버튼 클릭 시, 입력창에 있는 값 가져온 후 확인
var value=$('#search').val(); //콘솔에서 검은색=숫자, 파란색=숫자가아니고 문자열
var valueArr=value.split(',');
//모든 박스에 테두리를 기본으로 변경
$('.container1 .box').removeClass('selected');
$('.container2 .box').removeClass('selected');
for(tmp of valueArr){
tmp = parseInt(tmp);
console.log(tmp)
if(isNaN(tmp) || tmp > 5 || tmp <= 0){
console.log('잘못된 숫자입니다.');
continue;
}
//입력한 번호에 맞는 박스만 테두리 변경
//방법1 : eq()를 이용
$('.container1 .box').eq(tmp-1).addClass('selected');
//방법2 : 각 요소의 클래스 이름이 다른 것을 이용
$('.container2 .box.box'+tmp).addClass('selected');
}
//다중 선택이 가능해야하기 때문에 click을 이용한 아래 코드는 사용할 수 없다
// $('.container1 .box').eq(value-1).click();
// $('.container1 .box.box'+value).click();
})
$('.box').click(function(){
$(this).siblings().removeClass('selected'); //$(this).siblings()를하면 위,아래줄 따로가능
$(this).addClass('selected');
})
})
</script>
</head>
<body>
<input type="text" id="search"><button id="btn">클릭</button>
<div class="container container1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<div class="container container2">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_정규표현식 예제 (0) | 2021.07.01 |
|---|---|
| JQ_메뉴에 호버하면 서브메뉴 나타나도록 하는 예제 (0) | 2021.07.01 |
| JQ_다음에서 제공하는 무료 주소찾기창 서비스 (0) | 2021.06.30 |
| JQ_부모창, 자식창(window.open)으로 데이터 주고받기 (0) | 2021.06.30 |
| JQ_mouseenter,mouseleave,mouseover,mouseout(=hover) (0) | 2021.06.30 |