Я хочу сохранить нажатие при помощи JavaScript и JQuery всякий раз, когда я нажимаю DivTag, сохранять его на экране и публиковать

Question

Я реализовал jquery javascript onclick, чтобы переключать непрозрачность тега div (0 и 100) при каждом нажатии на тег div. Я использовал JQuery и JavaScript по массиву, onclick, получить элемент по Id и т. д.

Но даже если я обновлю страницу, я захочу сохранить ее в базе данных, чтобы я мог получить экран, на котором щелкнул.

Итак, есть ли способ получать информацию в базу данных каждый раз, когда я нажимаю на нее? Я хочу максимально использовать jquery. Потому что я не понимаю функцию link_to ruby ​​на рельсах.

Я пытался сохранить данные с помощью jquery, но мне это не удалось. Поскольку я снова использую событие jquery onclick, изменение непрозрачности нескольких div-ов (по onclick) больше не используется.

<table>
  <tr id="line1">
    <td class="timeTableCellTime">9:00</td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-1"></div>
    </td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-2"></div>
    </td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-3"></div>
    </td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-4"></div>
    </td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-5"></div>
    </td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-6"></div>
    </td>
    <td class="time_td">
      <div class="timeTableCell" id="c1-7"></div>
    </td>
  </tr>
</table>

var array = ['c1-1', 'c1-2', 'c1-3', 'c1-4', 'c1-5', 'c1-6', 'c1-7']

$('#line1 td').click(function() {
  var i = $(this).index();
  var element = document.getElementById(array[i - 1]);
  if (element.style.opacity === "100") {
    element.style.opacity = "0";
    element.style.transition = "0.2s";
  } else {
    element.style.opacity = "100";
    element.style.transition = "0.2s"
  }

});

.timeTableCell {
  width: 100px;
  text-align: center;
  height: 55px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 3px;
  opacity: 0;
  transition: 0.1s;
  cursor: pointer;
}

.timeTableCell:hover {
  opacity: 100;
  transition: 0.2s;
}

#c1-1,
#c2-1,
#c3-1,
#c4-1,
#c5-1,
#c6-1,
#c7-1,
#c8-1,
#c9-1,
#c10-1,
#c11-1,
#c12-1,
#c13-1 {
  background-image: url('cell_01.png');
}

Answer 1

Вы можете использовать cookie, я думаю

здесь две функции для манипулирования cookie Установить cookie и получить cookie с помощью JavaScript

сначала получите cookie с помощью getCookie ('key'), если его значение null вы начинаете как новое, когда пользователь нажимает сохранить его с помощью setCookie ('key', 'DIV_ID'), если его значение не равно null, вы можете выполнить выбранную манипуляцию div