0

メニューを作成しようとしています。OVer a canvasさまざまな画像を読み込み、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 と共にマップに配置し、すべてのボタンに対して 1 つのハンドラーを作成します。

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);

http://jsfiddle.net/LNFza/4/で jsfiddle をチェックしてください。

乾杯。

于 2012-11-18T18:32:35.567 に答える