Сохранение цвета фона в div onclick даже на странице refre sh? - PullRequest
Новая
       100

Сохранение цвета фона в div onclick даже на странице refre sh?

0 голосов
/ 07 мая 2020

Я меняю цвет фона div на желтый после onclick, но, поскольку страница обновляется, изменение цвета пропало.

enter image description here

Это это код, который я использую: 

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'yellow';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}   

</script> 
<h2>
   <b>Seminare nach Standort filtern</b></h2> 
<div id="nav"> 
   <div class="link" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div> 
</div>

Я пробовал использовать localStorage, но не могу понять, как применить его здесь. Может быть, что-то вроде localStorage.setItem("item.style.backgroundColor", 'yellow');, но одно это не подойдет

Вот полный код: 

<style>

#sideNavBox {display:none}
#contentBox {margin-left:0px}
#nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0px
}

.link {
  max-width: 150px;
  padding: 3px;
  margin: 10px;
  border: 2px solid lime;
  border-radius: 15px;
  flex-basis: 100%;
  text-align: center;
  cursor: pointer;
}

.active {
  background-color: lime
}

.dd13:hover { cursor: pointer; }

.dd13 {
color: #FFFFFF;
Font: 12px Arial
background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}


#pageStatusBar{
    display:none!important;
}



</style><script>
window.addEventListener("load", function() {
  document.getElementById("nav").addEventListener("click", function(e) {
    if (e.target.classList.contains("link")) {
      location = e.target.getAttribute("data-link"); // or openLink(e.target.getAttribute("data-link"))
    }
  })
})

var divItems = document.getElementsByClassName("link");

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'yellow';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}


</script>
<h2> 
   <b>Seminare nach Standort filtern</b></h2>
<div id="nav">
   <div class="link" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div>
</div>
<div id="register"> 
   <p>To register yourself to a seminar please click on this icon 
      <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon 
      <a title="Book for me" class="book-for-user-button"></a>.<br/></p> 
</div>

Любая помощь приветствуется.

Ответы [ 3 ]

1 голос
/ 07 мая 2020

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

Итак Чтобы установить значение в localstorage, вы можете просто сделать следующее: всякий раз, когда запускается событие click, вы должны сохранять значение в вашем localStorage следующим образом: 

function selected(item) {
  this.clear();
  item.style.backgroundColor = 'yellow';
  window.localStorage.setItem('backgroundColor', 'yellow');
}

Затем с событием onload , вы можете загружать его всякий раз, когда загружается окно, вот так: 

window.onload = function() {
  if (window.localStorage.getItem('backgroundColor')) {
    document.querySelector('.list').style.backgroundColor = window.localStorage.getItem('backgroundColor')
  }
}
1 голос
/ 07 мая 2020

Вы должны установить Item в localstorage, а также проверить этот же элемент с помощью localStorage.getItem () при загрузке страницы.

Вот как вы можете это сделать, проверьте фрагмент кода: 


<style>

#sideNavBox {display:none}
#contentBox {margin-left:0px}
#nav {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0px
}

.link {
  max-width: 150px;
  padding: 3px;
  margin: 10px;
  border: 2px solid lime;
  border-radius: 15px;
  flex-basis: 100%;
  text-align: center;
  cursor: pointer;
}

.active {
  background-color: lime
}

.dd13:hover { cursor: pointer; }

.dd13 {
color: #FFFFFF;
Font: 12px Arial
background-color:: #48A040;
Padding: 3px 3px 3px 3px;
}


#pageStatusBar{
    display:none!important;
}



</style><script>
window.addEventListener("load", function() {
  document.getElementById("nav").addEventListener("click", function(e) {
    if (e.target.classList.contains("link")) {
   //   location = e.target.getAttribute("data-link"); // or openLink(e.target.getAttribute("data-link"))
    }
  })
})

var divItems = document.getElementsByClassName("link");




function selected(item) {
   // this.clear();

    if( item.style.backgroundColor == 'yellow')
    {
        //means the item is selected already. So unset it.
        item.style.backgroundColor = 'white';
        localStorage.removeItem(item.id);
    }
    else
    {
        item.style.backgroundColor = 'yellow';

        console.log(item.id);
        localStorage.setItem(item.id, 'any value');

    }






    //localStorage.setItem("tempcolorvalue", "yellow");
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}


</script>
<h2> 
   <b>Seminare nach Standort filtern</b></h2>
<div id="nav">
   <div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>
   <div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>
   <div class="link" id="thirdlink"  onclick="selected(this)"  data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Köln" style="background-color: white;">Köln</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>
   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div>
</div>
<div id="register"> 
   <p>To register yourself to a seminar please click on this icon 
      <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon 
      <a title="Book for me" class="book-for-user-button"></a>.<br/></p> 
</div>


<script>
    if(localStorage.getItem("firstlink"))
    {
        document.getElementById('firstlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("secondlink"))
    {
        document.getElementById('secondlink').style.backgroundColor = "yellow";
    }
    if(localStorage.getItem("thirdlink"))
    {
        document.getElementById('thirdlink').style.backgroundColor = "yellow";
    }
</script>
1 голос
/ 07 мая 2020

К сожалению, это то, что страница должна делать на refre sh. Страница очищена. Вам нужно будет сохранить данные в базе данных для хранения информации. Это то, что вам нужно?

...