Блог

Я работаю над игрой для веб-сайта, у меня есть картинка, и пользователь, щелкнув, может выбрать, куда полетит мяч. У него есть 10 попыток, нажав, пользователь заполняет 20 входных данных (x и y для каждой попытки) уникальным идентификатором, таким как «x1», «y1», «x2» и т.д..

Моя проблема в том, что я хочу, чтобы пользователь отредактировал одну попытку, щелкнув значок.

У меня есть временное решение, значения находятся в sessionStorage, и когда они нажимают на кнопку Редактирования, оно перенаправляет с идентификатором попытки и значением, сохраненным в сеансе, затем я просто заполняю один ввод, обновляю его по щелчку и перенаправляю на 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);


});
  

}

Спасибо!

Вам не нужно хранилище сеанса.

Вы можете использовать setAttribute и getAttribute для изменения атрибутов HTML-элементов, которые вы в данный момент получаете с помощью getElementById, без перезагрузки.

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