この「クリックギャラリ」の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

あなたが大幅にこれを簡素化するために属性data HTML5を使用することができます。

$(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>要素を削除できます。このような