Question

我有svg文本填充，这是动态的。一旦用户单击撤消按钮，它必须撤消svg和textarea，一旦用户单击重做按钮，它应该重做svg文本填充和textarea。我已经完成了textarea撤消和重做功能，但没有使用svg元素如何通过jquery实现这一点

   $("#enter-text").on("keypress",function(){
 $("#svg_id").html($(this).val());
  })

//this value is kept small for testing purposes, you'd probably want to    use sth. between 50 and 200
const stackSize = 10;

  //left and right define the first and last "index" you can actually       navigate to, a frame with maximum stackSize-1 items between them.
  //These values are continually growing as you push new states to the    stack, so that the index has to be clamped to the actual index in stack by      %stackSize.
   var stack = Array(stackSize), left=0, right=0, index = 0, timeout;
 //push the first state to the stack, usually an empty string, but not    necessarily
 stack[0] = $("#enter-text").val();
updateButtons();

$("#enter-text").on("keydown keyup change", detachedUpdateText);
$("#undo").on("click", undo);
$("#redo").on("click", redo);

//detach update
function detachedUpdateText(){
    clearTimeout(timeout);
    timeout = setTimeout(updateText, 500);
}

   function updateButtons(){
    //disable buttons if the index reaches the respective border of the        frame
    //write the amount of steps availabe in each direction into the data-    count attribute, to be processed by css
       $("#undo")
        .prop("disabled", index === left)
        .attr("data-count", index-left);

       $("#redo")
        .prop("disabled", index === right)
          .attr("data-count", right-index);

    //show status
       $("#stat").html(JSON.stringify({
        left,
        right,
        index,
        "index in stack": index % stackSize,
        stack
    }, null, 4))
}

function updateText(){
    var val = $("#enter-text").val().trimRight();
    //skip if nothing really changed
    if(val === stack[index % stackSize]) return;

    //add value
    stack[++index % stackSize] = val;

    //clean the undo-part of the stack
    while(right > index)
        stack[right-- % stackSize] = null;

    //update boundaries
    right = index;
    left = Math.max(left, right+1-stackSize);

    updateButtons();
}

function undo(){
    if(index > left){
        $("#enter-text").val(stack[--index % stackSize]);
        updateButtons();
    }
    }

     function redo(){
    if(index < right){
        $("#enter-text").val(stack[++index % stackSize]);
        updateButtons();
    }
     }

https://jsfiddle.net/yvp3jedr/6/

Answer 1

$("#enter-text").on("keypress", function () {
    $("#svg_id").text($(this).val());
})

//this value is kept small for testing purposes, you'd probably want to use sth. between 50 and 200
const stackSize = 10;

//left and right define the first and last "index" you can actually navigate to, a frame with maximum stackSize-1 items between them.
//These values are continually growing as you push new states to the stack, so that the index has to be clamped to the actual index in stack by %stackSize.
var stack = Array(stackSize), left = 0, right = 0, index = 0, timeout;
//push the first state to the stack, usually an empty string, but not necessarily
stack[0] = $("#enter-text").val();
updateButtons();

$("#enter-text").on("keydown keyup change", detachedUpdateText);
$("#undo").on("click", undo);
$("#redo").on("click", redo);

//detach update
function detachedUpdateText() {
    clearTimeout(timeout);
    timeout = setTimeout(updateText, 500);
}

function updateButtons() {
    //disable buttons if the index reaches the respective border of the frame
    //write the amount of steps availabe in each direction into the data-count attribute, to be processed by css
    $("#undo")
        .prop("disabled", index === left)
        .attr("data-count", index - left);

    $("#redo")
        .prop("disabled", index === right)
        .attr("data-count", right - index);

    //show status
    $("#stat").html(JSON.stringify({
        left,
        right,
        index,
        "index in stack": index % stackSize,
        stack
    }, null, 4))
}

function updateText() {
    var val = $("#enter-text").val().trimRight();
    //skip if nothing really changed
    if (val === stack[index % stackSize]) return;

    //add value
    stack[++index % stackSize] = val;

    //clean the undo-part of the stack
    while (right > index)
        stack[right-- % stackSize] = null;

    //update boundaries
    right = index;
    left = Math.max(left, right + 1 - stackSize);

    updateButtons();
}

function undo() {
    if (index > left) {
        var text = stack[--index % stackSize];
        $("#enter-text").val(text);
        $("#svg_id").text(text);
        updateButtons();
    }
}

function redo() {
    if (index < right) {
        var text = stack[++index % stackSize];
        $("#enter-text").val(text);
        $("#svg_id").text(text);
        updateButtons();
    }
}

如何在svg元素中撤消和重做onclick？

1 个答案: