我如何制作这个'；单击gallery'；jQuery代码更好？

下面是我可以想到的实现点击库的粗略方法。我知道有更好的方法可以做到这一点，而不需要绑定

单击每个按钮

我要寻找的是：无论如何，通过它我可以猜到点击了哪个按钮（在本例中是span）。并自动绑定

谢谢。以下是代码：

    <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>


$（文档）.ready（函数（）{
$（'#gallery-button-1'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/koala.png）”）；
});
$（'#gallery-button-2'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/lighthouse.png）”）；
});
$（'#gallery-button-3'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/penguins.png）”）；
});
$（'#gallery-button-4'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/tulips.png）”）；
});
$（'#gallery-button-5'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/5.png）”）；
});
$（'#gallery-button-6'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/6.png）”）；
});
$（'#gallery-button-7'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/7.png）”）；
});
$（'#gallery-button-8'）。单击（函数（）{
$（'#Image'）.css（“背景图像”，“url（Content/images/8.png）”）；
});
});
1.
2.
3.
4.
5.
6.
7.
8.
您可以使用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>
...

1
...


更紧凑的阵列解决方案：

$(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()] + ')');
  });
});

$（函数（）{
变量图像=[
“Content/images/koala.png”，
...
];
$.each（图像、函数（索引、值）{
$（''）.text（索引+1）.appendTo（'#ButtonBox'）；
});
$（'#按钮盒'）。在（'span'，'click'，function（）上{
$（'#Image'）.css（'background-Image'，'url（'+images[$（this.index（）]+'））；
});
});

现在，您可以删除所有
元素。
您可以使用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>
...

1
...


更紧凑的阵列解决方案：

$(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()] + ')');
  });
});

$（函数（）{
变量图像=[
“Content/images/koala.png”，
...
];
$.each（图像、函数（索引、值）{
$（''）.text（索引+1）.appendTo（'#ButtonBox'）；
});
$（'#按钮盒'）。在（'span'，'click'，function（）上{
$（'#Image'）.css（'background-Image'，'url（'+images[$（this.index（）]+'））；
});
});

现在您可以删除所有的
元素。
类似这样的内容-

$('span[id^="gallery-button"]').click(function() {
    var currentID = $(this).attr('id');
    var buttonNum = currentID.substring(currentID.length - 1);
    var imgURL = 'Content/images/' + buttonNum + '.png';
    $('#Image').css("background-image", "url(" + imgURL + ")");
});

当然，这只适用于编号的图像。要获取其他图像，您需要找到一种方法，按照上面数据属性的建议，将其包含在标记中。
类似这样的内容-

$('span[id^="gallery-button"]').click(function() {
    var currentID = $(this).attr('id');
    var buttonNum = currentID.substring(currentID.length - 1);
    var imgURL = 'Content/images/' + buttonNum + '.png';
    $('#Image').css("background-image", "url(" + imgURL + ")");
});

当然，这只适用于编号的图像。要获取其他图像，您需要找到一种方法将其包含在标记中，如上面的data属性所建议的那样。
在
.css
行中，是否应该在末尾有一个右括号？是的，我只是很快地键入了它。我把它修好了。在你的
.css
行中，结尾不应该有一个右括号吗？是的，我只是很快就把它打出来了。我修复了它。未捕获的TypeError:Object#没有方法“on”我应该获得最新的jQuery版本吗？是的。你现在可能已经明白了。未捕获的TypeError:Object#没有方法“on”我应该得到最新的jQuery版本吗？是的。你现在可能已经明白了。