이 '클릭 갤러리'jQuery 코드를 어떻게 더 좋게 만들 수 있습니까?

Question

다음은 클릭 갤러리를 구현할 수있는 참신한 방법입니다. 나는 더 나은 방법이 있다는 것을 알고있다. 모든 버튼에 바인딩 click을 요구하지 않는다.

내가 찾고있는 것 : 어쨌든 어떤 버튼 (이 경우 스팬)을 클릭했는지 추측 할 수 있습니다. 그리고 자동으로 바인딩합니다.

감사합니다.

는

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#gallery-button-1').click(function() { 
      $('#Image').css("background-image", "url(Content/images/koala.png)"); 
     }); 
     $('#gallery-button-2').click(function() { 
      $('#Image').css("background-image", "url(Content/images/lighthouse.png)"); 
     }); 
     $('#gallery-button-3').click(function() { 
      $('#Image').css("background-image", "url(Content/images/penguins.png)"); 
     }); 
     $('#gallery-button-4').click(function() { 
      $('#Image').css("background-image", "url(Content/images/tulips.png)"); 
     }); 
     $('#gallery-button-5').click(function() { 
      $('#Image').css("background-image", "url(Content/images/5.png)"); 
     }); 
     $('#gallery-button-6').click(function() { 
      $('#Image').css("background-image", "url(Content/images/6.png)"); 
     }); 
     $('#gallery-button-7').click(function() { 
      $('#Image').css("background-image", "url(Content/images/7.png)"); 
     }); 
     $('#gallery-button-8').click(function() { 
      $('#Image').css("background-image", "url(Content/images/8.png)"); 
     }); 
    }); 
</script> 

<div id="Gallery"> 

    <div id="ButtonBox"> 
     <span id="gallery-button-1">1</span> 
     <span id="gallery-button-2">2</span> 
     <span id="gallery-button-3">3</span> 
     <span id="gallery-button-4">4</span> 
     <span id="gallery-button-5">5</span> 
     <span id="gallery-button-6">6</span> 
     <span id="gallery-button-7">7</span> 
     <span id="gallery-button-8">8</span> 
    </div> 
    <div id="Image"></div> 

</div> 

Answer 1

당신은 HTML5를 사용할 수 있습니다 크게이를 단순화하기 위해 속성 data :

$(function() { 
    $('#ButtonBox span').on('click', function() { 
    $('#Image').css('background-image', 'url(' + $(this).data('image') + ')'); 
    }); 
}); 

그리고 수정 된 HTML을 : 여기에 코드입니다

<span id="gallery-button-1" data-image="Content/images/koala.png">1</span> 
... 

---

배열과 더 컴팩트 한 솔루션 :

$(function() { 
    var images = [ 
    'Content/images/koala.png', 
    ... 
    ]; 

    $.each(images, function(index, value) { 
    $('<span />').text(index + 1).appendTo('#ButtonBox'); 
    }); 

    $('#ButtonBox').on('span', 'click', function() { 
    $('#Image').css('background-image', 'url(' + images[$(this).index()] + ')'); 
    }); 
}); 

이제 모든 <span> 요소를 제거 할 수 있습니다. 이 같은