Remembered selected field from a different page or previously saved in user account

58
April 24, 2017, at 08:01 AM

I was wondering if anyone knows how I can have a selected field showing if the selected field was previously selected on a different page. So if '.clicked' is active because selected on a different page then '.border' will have '.showBorder' active on the relevant field as per working example below

// Get references to the two sets of boxes 
var numbers = document.querySelectorAll(".clicked"); 
var letters = document.querySelectorAll(".border"); 
 
// Turn each node list into proper arrays: 
numbers = Array.prototype.slice.call(numbers); 
letters = Array.prototype.slice.call(letters); 
 
// Loop through all the number boxes 
numbers.forEach(function(box, index) { 
 
  // Set up the click event handlers for all the number boxes 
  box.addEventListener("click", function() { 
 
    // Remove borders from each of the letter boxes 
    letters.forEach(function(box) { 
      box.classList.remove("showBorder"); 
    }); 
 
   // Apply the border to only the one clicked element 
    var info = document.getElementsByClassName('box-tip')[0]; 
 
 
    if (index > 2) { 
      info.style.left = 11 + ((index - 3) * 45) + 'px'; 
    } 
    else { 
    info.style.left = 0 + 'px'; 
    } 
    info.style.visibility = 'visible'; 
 
    letters[index].classList.add("showBorder"); 
 
  }); 
 
}); 
 
 
$(document).on("click", '.clicked', function(){ 
    $('.clicked').removeClass('selected'); 
    $(this).addClass('selected'); 
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
.list-box {margin:15px auto;padding:0;} 
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
.box-sleeve {margin:15px auto;padding:0;} 
.showBorder { border: 1px dashed #233354; } 
.box-tip { 
  display:inline; 
  margin: auto; 
	position: relative; 
	visibility: hidden; 
  padding-left:10px; 
 } 
 
.numberCircle { 
  border-radius: 90%; 
  font-size: 12px; 
  border: 2px solid #000; 
  color: #fff; 
  background: #000; 
  padding: 0 4px; 
} 
 
.numberCircle span { 
  text-align: center; 
  display: block; 
} 
 
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="list-box"> 
  <li class="clicked">1</li> 
  <li class="clicked">2</li> 
  <li class="clicked">3</li> 
  <li class="clicked">4</li> 
  <li class="clicked">5</li> 
  <li class="clicked">6</li> 
  <li class="clicked">7</li> 
  <li class="clicked">8</li> 
</ul> 
<div class="box-tip"> 
  <span class="info">Regular length for your collar size</span> 
  <span class="numberCircle">?</span> 
</div> 
<ul class="box-sleeve"> 
  <li class="border">a</li> 
  <li class="border">b</li> 
  <li class="border">c</li> 
  <li class="border">d</li> 
  <li class="border">e</li> 
  <li class="border">f</li> 
  <li class="border">g</li> 
  <li class="border">h</li> 
</ul>

READ ALSO
How could I do this things in jQuery?

How could I do this things in jQuery?

How can I set a CSS parameter in function of a calc? (in my const STYLES I have the property TOP that I want that it be: numberOfMenuItems * -48px)

56
Using jquery variable as CSS property

Using jquery variable as CSS property

forgive me if I'm not asking this properly, I'm new to this siteI'm working on the Etch-a-Sketch project from The Odin Project, some of you may be familiar with it

62
Jquery, if else loop for seasons

Jquery, if else loop for seasons

I just started with Jquery with limited knowledge of codingI was wondering is it possible to create an if else loop for seasons based on what days

81
Backbone save() method Post insead of Put

Backbone save() method Post insead of Put

I'm trying to update data on backboneBut my save() function post insead of put

79