javascript - 如何编辑 JS 填充的输入？

Question

我正在为网站开发一款游戏，我有一张图片，用户可以通过点击来选择球的去向。他进行了 10 次尝试，通过单击，用户使用唯一 ID(如“x1”、“y1”、“x2”等)填充 20 个输入(每次尝试的 x 和 y)。

我的问题是我希望用户通过单击图标尝试编辑一次。

我有一个临时解决方案，值在 sessionStorage 中，当他们单击“编辑”按钮时，它会使用 try 的 id 和存储在 session 中的值进行重定向，然后我只需填写一个输入，点击更新它并重定向到 10 后面。

但我应该防止重新加载，我需要它尽可能简单:他们单击编辑，他们单击图片并编辑值。无需刷新页面。

这是我的代码，如果你们有想法的话:

$("#imgtoCenter").click(function (e) {
selection += 1;
lastSelection = selection-1;
toAppear += 1;

var offset =  $("#imgtoCenter").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);

sessionStorage.setItem('x'+(selection-1), Math.round(relativeX));
sessionStorage.setItem('y'+(selection-1), Math.round(relativeY));

document.getElementById("toAppear"+(toAppear)).style.display = "inline-block";
document.getElementById("toEdit"+(toAppear)).style.display = "inline-block";
document.getElementById("x"+(selection-1)).value = sessionStorage.getItem('x'+(selection-1));
document.getElementById("y"+(selection-1)).value = sessionStorage.getItem('y'+(selection-1));
document.getElementById("inputRow"+lastSelection).style.backgroundColor = "transparent";
document.getElementById("inputRow"+lastSelection).style.color = "#000";
document.getElementById("inputRow"+selection).style.backgroundColor = "#6C63FF";
document.getElementById("inputRow"+selection).style.color = "#000";
if(selection == sessionStorage.length) {
    for(let j = 1; j<=sessionStorage.length; j++) {

    }
}

});

函数 editTicket(id) { $("#imgToEdit").click(函数 (e) {

    var offset =  $("#imgToEdit").offset();
    var relativeX = (e.pageX - offset.left);
    var relativeY = (e.pageY - offset.top);

    sessionStorage.removeItem('x'+id);
    sessionStorage.removeItem('y'+id);
    document.getElementById("inputRow"+id).style.backgroundColor = "#6C63FF";
    document.getElementById("inputRow"+id).style.color = "#fff";
    sessionStorage.setItem('x'+id, Math.round(relativeX));
    sessionStorage.setItem('y'+id, Math.round(relativeY));
    document.getElementById("x"+id).value = sessionStorage.getItem('x'+id);
    document.getElementById("y"+id).value = sessionStorage.getItem('y'+id);


});

谢谢!

Answer 1

您不需要 session 存储。

您可以使用 setAttribute 和 getAttribute 来更改当前通过 getElementByID 获取的 HTML 元素的属性，而无需重新加载。

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute