0

I implemented jquery javascript onclick to switch the opacity of div tag (0 and 100) whenever I clicked on the div tag. I used jquery and javascript by array, onclick, get element by Id and so on.

But even if I refresh the page, I want to save it in the database so that I can get a screen that I clicked.

So, is there a way to get the information to the database every time I click it? I want to use jquery as much as possible. Because I don't understand the link_to function of ruby on rails.

I tried to save data by using jquery but I failed. Since I use jquery onclick event again, changing multiple divs' opacity (by onclick) is gone. 

<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');
}
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Jimyung
  • 1

1 Answers1

0

you can use cookie i think

here two function for cookie manipulation Set cookie and get cookie with JavaScript

first get the cookie with getCookie('key') if its null you start as new when the user click save it with setCookie('key','DIV_ID') if its not null you can do your selected div manipulation

BootEXE
  • 13
  • 4