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>元素。

Answer 2

像这样 -

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

当然这仅适用于带编号的图像。要获取其他图像，您需要找到一种方法，将其包含在您的标记中，如上面的数据属性所示。

如何更好地制作这个“点击图库”jQuery代码？

2 个答案: