Question

我正在尝试建立一个菜单。 OVer画布我加载不同的图像并使用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();
}

Answer 1

可能是您可以通过以下代码缩小编码，

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

Answer 2

我将所有数值与相应的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);

查看jsfiddle：http://jsfiddle.net/LNFza/4/

干杯。

jquery交换图像点击并隐藏然后

2 个答案: