jQuery 배열 each click 처리

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>

눌러보세요~