jquery - jQuery - 单击时更改图像（简化功能）

Question

我创建了一个迷你演示，用于在点击时更改图像。以为我可以得到一些反馈，看看我如何最小化/清理代码。不要介意图像大小，它们是 FPO。图像加载也有轻微的滞后。如何将预加载器集成到此示例中？

我不认为这是实现我想要实现的目标的最佳解决方案。有人有类似的资源可以指点我吗？

http://jsfiddle.net/mJ7Wc/

$(document).ready (function () {
    $('#wheel1').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/50x50';
        document.getElementById('changeFront').src='http://placehold.it/50x50';
    });
    $('#wheel2').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/30x30';
        document.getElementById('changeFront').src='http://placehold.it/30x30';
    });
 $('#wheel3').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/60x60';
     document.getElementById('changeFront').src='http://placehold.it/60x60';
    });
    $('#wheel4').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/80x80';
        document.getElementById('changeFront').src='http://placehold.it/80x80';
    });
});

Answer 1

给你几个选择。

1.使用地图：

（见下面的注释。）

$(document).ready (function () {
    var images = {
        wheel1: {
            front: 'http://placehold.it/50x50',
            back:  'http://placehold.it/50x50'
        },
        wheel2: {
            front: 'http://placehold.it/30x30',
            back:  'http://placehold.it/30x30'
        },
        wheel3: {
            front: 'http://placehold.it/60x60',
            back:  'http://placehold.it/60x60'
        },
        wheel4: {
            front: 'http://placehold.it/80x80',
            back:  'http://placehold.it/80x80'
        }
    };

    $(".wheels").click(function() {
        var entry = images[this.id];
        if (entry) {
            $('#changeFront')[0].src = entry.front;
            $('#changeBack')[0].src  = entry.back;
        }
    }
});

对此有两点说明：

1. 我已经完成了更复杂的事情，即在正面和背面使用单独的图像，以防万一你的意思是这样；没有立即明白为什么我们要重复相同的图像两次。如果您真的想两次使用相同的图像，只需将wheelX条目设为实际路径，而不是使用frontand的对象back。

2. 我已经包含了完整路径以防万一。如果它没有变化，当然将不变位移动到函数中，并50x50在地图中包含 or 或任何内容。

2.data-*在元素上使用属性。

$(document).ready (function () {
    $(".wheels").click(function() {
        var $this = (this);
        $('#changeFront')[0].src = $this.attr("data-front");
        $('#changeBack')[0].src  = $this.attr("data-back");
    }
});

...您的轮子在标记中指定图像的位置：

<div id="wheel1" class="wheels" data-front="http://placehold.it/50x50" data-back="http://placehold.it/50x50">

...并且上面相同的两个注释适用于此。