Javascript 单击并隐藏jquery交换图像，然后

我在试着制作菜单。在画布上，我加载不同的图像并使用CSS定位它们。目前，我使用SHOW/HIDE操作，有大量代码重复。我的问题是： -我如何用另一张图片来改变它，而不是仅仅隐藏一张图片？然后再次隐藏它，如果我点击另一个按钮？ -是否有可能以更简单的方式编写所有这些代码

非常感谢

   $("#ten").click(sizeTen);
function sizeTen(){
    cb_ctx.lineWidth = 10;
    clickSound();
    $(this).hide();
    $("#twenty").show();
    $("#forty").show();
    $("#sixty").show();
}

$("#twenty").click(sizeTwenty);
function sizeTwenty(){
    cb_ctx.lineWidth = 20;
    clickSound();
    $(this).hide();
    $("#tenClick").show();
    $("#ten").show();
    $("#forty").show();
    $("#sixty").show();
}

$("#forty").click(sizeForty);
function sizeForty(){
    cb_ctx.lineWidth = 40;
    clickSound();
    $(this).hide();
    $("#ten").show();
    $("#twenty").show();
    $("#sixty").show();
}

$("#sixty").click(sizeSixty);
function sizeSixty(){
    cb_ctx.lineWidth = 60;
    clickSound();
    $(this).hide();
    $("#ten").show();
    $("#twenty").show();
    $("#forty").show();
}

---

也许你可以用下面的代码来压缩你的代码

$("#ten,#twenty,#sixty").show();

---

我将所有数值和相应的ID放在一个映射中，并为所有按钮创建一个处理程序：

var boo = function () {
    var values = { 'ten': 10, 'twenty': 20, 'forty': 40, 'sixty': 60 };
    var id = $(this).attr('id');

    $(this).hide();

//    cb_ctx.lineWidth = values[id];
//    clickSound();

    $.each(values, function(key, value) {
        if (id != key) {
            $('#' + key).show();
        }
    });
};

$('#ten, #twenty, #forty, #sixty').click(boo);

请在以下位置查看JSFIDLE：

---

干杯。

是的，这可能要简单得多，但很难说你想要实现什么。你能发布一个例子或者一个JSFIDLE吗？我正在开发一个小的绘图程序，所以我可以用它来学习。完整的东西是可以看到的。我想把这些按钮（颜色和大小）与其他一些图像交换。