Question

我正在为一个网站开发游戏，我有一张图片，并且用户可以通过单击来选择球的位置。通过单击，他有10次尝试，用户用唯一的ID（例如“ x1”，“ y1”，“ x2”等）填充20个输入（每次尝试x和y）。

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

我有一个临时解决方案，这些值在sessionStorage中，当它们单击“编辑”按钮时，它将使用try的id和存储在会话中的值进行重定向，然后我只填写一个输入，请点击更新它，然后重定向到后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++) {

    }
}

}）;

function 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

您不需要会话存储。

您可以使用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

如何编辑JS填充输入？

1 个答案: