时间戳

首页 > 解决方案 > 每当我单击 DivTag 时，我想使用 JavaScript 和 JQuery 保存单击，并将其保存在屏幕上并发布

javascript - 每当我单击 DivTag 时，我想使用 JavaScript 和 JQuery 保存单击，并将其保存在屏幕上并发布

问题描述

每当我点击 div 标签时，我实现了 jquery javascript onclick 来切换 div 标签（0 和 100）的不透明度。我通过数组、onclick、通过 Id 获取元素等使用 jquery 和 javascript。

但即使我刷新页面，我也想将它保存在数据库中，以便我可以得到我点击的屏幕。

那么，有没有一种方法可以让我每次点击时都将信息导入数据库呢？我想尽可能多地使用 jquery。因为我不明白 ruby​​ on rails 的 link_to 功能。

我尝试使用 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');
}

标签： javascriptjqueryhtmlpostonclick

解决方案

我认为你可以使用 cookie

这里有两个用于 cookie 操作的函数 Set cookie 和 get cookie with JavaScript

首先使用 getCookie('key') 获取 cookie，如果它为 null，则当用户单击时以新的形式开始使用 setCookie('key','DIV_ID')

推荐阅读