11. JQuery 속성 변경하기 예시 - 1

JQuery 2022. 9. 1. 09:05

if문을 활용하여 특정한 상황에 따라 속성의 값을 변경할 수 있다.

원하는 기능 : id가 admin일 때는 버튼 클릭 후 링크를 클릭하면 http://www.gdu.co.kr 로, 그 외의 id를 입력하고 버튼을 클릭 후 링크를 클릭하면 http://www.google.co.kr로 이동한다.

해결 방법 : if문을 활용하여 input태그의 value가 admin일 경우와 그 외를 구분하여 a태그의 href 속성을 각각 변경시킨다.

* input의 값에 따라 a 태그의 href의 속성을 변경하는 예시

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<p>

ID : <input type="text" id="test"><button id="goLink">확인</button>

</p>

</body>

//input에 아이디를 입력하고 버튼을 눌렀을 때

//a 태그의 href 속성이 변경된다.

//id가 admin일 경우 http://www.gdu.co.kr

// $("#goLink").click(function(){

// if($("#test").val()=="admin"){

// $("a").attr("href","http://www.gdu.co.kr");

// }else{

// $("a").attr("href","http://www.google.co.kr");

// }

// });

$("#goLink").click(function(){

var val = $("#test").val();

var link = "http://www.google.co.kr";

if(val=="admin"){

link = "http://www.gdu.co.kr";

}

$("a").attr("href",link);

});

</script>

</html>

황민준 개발 블로그 황민준 개발 블로그