2

これは私の以前の質問に関連しています。コーディングの学習を手伝ってくれているここにいるすべての人に感謝します:D

私は以前、元に戻すボタンに取り組んでいましたが、それは機能しますが、まだありません:(

これが私がやったことですここをクリックしてください。しかし、問題は、段階的に逆行するため、同じ部分で前の色が適用された項目まで待たなければならないことです。このようなものを分割する方法はありますか?ここをクリックしてください。このアイデアはうまくいきますか?

テストのhtmlコードは次のとおりです。

  <div id="colour">
    <input type="submit" name="r1" id="r1" value="1" />
    <input type="submit" name="r2" id="r2" value="2" />
    <input type="submit" name="r3" id="r3" value="3" />
    <input type="submit" name="r4" id="r4" value="4" />
    <input type="submit" name="r5" id="r5" value="5" />
    <input type="submit" name="r6" id="r6" value="6" />
 </div>
 <div id="map">
    <input type="radio" name="radio" id="layer_a" value="a" />
    <label for="layer">layer_a</label>
    <input type="radio" name="radio" id="layer_b" value="b" />
    <label for="layer">layer_b</label>
    <input type="radio" name="radio" id="layer_c" value="c" />
    <label for="layer">layer_c</label>
    <input type="radio" name="radio" id="layer_d" value="d" />
    <label for="layer">layer_d</label>
 </div>
 <input name="selected" id="selected" type="hidden" value="" />

 <input type="submit" name="undo" id="undo" value="undo" />

 <div id="result"></div>

テストjQueryコードは次のとおりです。

 $("#colour input").click(function() {
    $("input[name='selected']").val(this.id);
 });
 var arraymap = [];
 var array_a = [];
 var array_b = [];
 var array_c = [];
 var array_d = [];

 $("#map input").click(function() {
    var mape = $(this).attr('id');
    var ccurrent = $("input[name='selected']").val();
    arraymap.push(mape);

    // trying to split it into diffrent arrays //
    if (mape == "layer_a") {
            array_a.push(ccurrent);
            var araycurrent = array_a;
    } else if (mape == "layer_b") {
            array_b.push(ccurrent);
            var araycurrent = array_b;
    } else if (mape == "layer_c") {
            array_c.push(ccurrent);
            var araycurrent = array_c;
    } else if (mape == "layer_d") {
            array_d.push(ccurrent);
            var araycurrent = array_d;
    };

    var mapid = arraymap[arraymap.length - 1];
    var colid = arraycurrent[arraycurrent.length - 1];

    var loca = mapid + colid;

    $("#result").append(mapid);
 });

 $("#undo").click(function() {
    arraymap.pop();
    var remover_map = arraymap[arraymap.length - 1];

    // trying get it back from split arrays //
    if (remover_map == "layer_a") {
            array_a.pop();
            var remover_col = array_a[array_a.length - 1];
    } else if (remover_map == "layer_b") {
            array_b.pop();
            var remover_col = array_b[array_b.length - 1];
    } else if (remover_map == "layer_c") {
            array_c.pop();
            var remover_col = array_b[array_c.length - 1];
    } else if (remover_map == "layer_d") {
            array_d.pop();
            var remover_col = array_a[array_d.length - 1];
    };

    var remove = remover_map + remover_col;

    $("#result").append(remove);

 });
4

1 に答える 1

1

レイヤー配列をオブジェクトに格納して、連想配列として使用できます。そうすれば、レイヤー名で簡単に参照できます。

あなたの例の私のバージョンは次のとおりです:(動作デモ: http://jsfiddle.net/qbdyp/ )

var step_layer = [];  // layers affected by each step
var step_colour = {  // selected colours by layer
    "a": [],
    "b": [],
    "c": [],
    "d": []
};

var $map = $("#map"), $result = $("#result");  // cache
$("#colour > input").click(function() {
    var layer = $map.find("input[name='radio']:checked").val();  // current layer
    var colour = this.value;  // selected colour
    step_layer.push(layer);
    step_colour[layer].push(colour);
    $result.append("Added " + colour + " to layer " + layer + "<br/>");
});

$("#undo").click(function() {
    var layer = step_layer.pop();  // get most recently changed layer
    if (typeof layer === "undefined") {
        $result.append("(Nothing to undo)<br />");
        return;
    }
    var colour = step_colour[layer].pop();  // get latest change in that layer
    $result.append("Removed " + colour + " from layer " + layer + "<br/>");        
});

そして、ここにもっと精巧な例があります。うまくいけば、あなたが達成しようとしているものに近いものです: http://jsfiddle.net/uWUve/

于 2012-05-29T11:03:34.837 に答える