0

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

2 回答 2

0

也许你可以通过以下代码来缩小你的编码，

$("#ten,#twenty,#sixty").show();
于 2012-11-18T18:06:30.170 回答
0

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

干杯。

于 2012-11-18T18:32:35.567 回答