javascript - 将项目吐到不同的数组中并将其取回

Question

这与我之前提出的问题有关，感谢这里帮助我学习编码的每一个人 :D

我之前正在研究一个撤消按钮，它可以工作但还没有:(

这是我所做的click here .但问题是因为它一步一步地向后退，所以它必须等到在同一部分应用了先前颜色的项目。有没有办法我可以拆分这样的东西 click here这个想法会成功吗？

这里是测试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);

 });

Answer 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/