관리 메뉴

맛집 여행 캠핑 일상 생활

jQuery 배열 each click 처리 본문

jQuery

jQuery 배열 each click 처리

♥ 영은파더♥ 2016. 6. 15. 11:46

jQuery 배열 each click 처리



버튼을 다중으로 처리시 유용하게 사용할 수 있다.


i값은 몇번째 배열인지 알수 있는 값이다.


<script>

$(document).ready(function(){

$('.btnColor').each(function(i){

$(this).click(function(e){

e.preventDefault();

alert(i+'번 버튼 '+this.style.background);

});

});

});

</script>


<div>

<button class="btnColor" style="width:20px;height:20px;background:#000000;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#808080;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#FFFFFF;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#FF0000;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#FFA500;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#FFFF00;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#008000;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#0000FF;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#000080;border:1px solid #888888;margin:2px;" />

<button class="btnColor" style="width:20px;height:20px;background:#800080;border:1px solid #888888;margin:2px;" />

</div>




눌러보세요~


Trackback : 0 | Comments : 0
댓글쓰기 폼