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条目设为实际路径，而不是使用front和back的对象。

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

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

......而上述相同的两个注释适用于此。