Question

您好我想询问是否可以在整个网站刷新后维护功能的更改。到目前为止，我找到了一个代码，用于更改具有值的跨度的背景颜色。但是，因为它是onclick，当页面刷新时，背景颜色会变回原始颜色。

$('#submit').click(function(){
   $('td span').each(function(index){
       if( $(this).text().length !== 0 ){
          $(this).parent().css('background-color', 'yellow');
       }
   });       
});

JSFIDDLE 1

是否有办法在页面刷新后维护更改，还是有其他方法可以执行此操作？听众可能或检查者首先检查网站是否有价值。而不是让父母的背景颜色改变，我希望相反的列改变。一个没有价值的人。会有可能吗？ Javascript或Jquery没问题。

修改

是的，我想我的问题有点不清楚。好吧，我编辑了上面的代码。你可以在那里看到有2列的表格。我希望它在页面刷新后保留这种方式。但到目前为止，我仍然坚持修改代码..它不再保存颜色。我认为我一路上犯了一个错误，但我无法理解...... :(

JSFIDDLE 2

更新

好的另一次尝试@ trincot的回答，我找到了我想要的东西，但并不完全。它有点长，没有必要突出文本和输入文本。整个框应该不要突出显示。请参阅此 JSFIDDLE 1 。下面是我修改的那个。

JSFIDDLE 3

Answer 1

你需要使用;

a）HTML5本地存储 - http://www.w3schools.com/html/html5_webstorage.asp或，

b）JavaScript Cookie - http://www.w3schools.com/js/js_cookies.asp

HTML存储示例：

$('#button').click(function(){
   // update on click
   $('body').css('background-color', 'yellow');

  // set local stoarge to true so that it'll work after a refresh
  if (!localStorage.clicked) {
    localStorage.clicked = true;
  }

});

// check on document ready
$(function(){
if (localStorage.clicked) {
  $('body').css('background-color', 'yellow');
}
});

Answer 2

正如PartyPete25所建议的，我们可以使用HTML5 localstorage。

这是有效的JSFiddle

所以这是代码，

    <table border="1px" width="50%">
  <tr>
    <td><span class="bgValue"></span></td>
    <td><span class="bgColor">1</span></td>
  </tr>
  <tr>
    <td><span class="bgValue"></span></td>
    <td><span class="bgColor">5</span></td>
  </tr>
  <tr>
    <td><span class="bgValue"></span></td>
    <td><span class="bgColor">8</span></td>
  </tr>
</table>
<input type="button" value="Try it" />

JS

var tdValue = $('.bgValue');

 var storedBgColor = localStorage.getItem('.bgColor');

 if (storedBgColor) {
   tdValue.parent().css('background-color', storedBgColor);
 } else {
   // set default color
   alert('no color set');

 }


 $('input').click(function() {

   $('td span').each(function(index) {

     if ($(this).text().length !== 0) {
       $(this).parent().css('background-color', 'yellow');
       var bgColor = $('.bgColor');

       localStorage.setItem('.bgColor', 'yellow');


       // When a span with some value is found, alert the index of the row
       alert($(this).closest('tr')[0].rowIndex);

     }

   });
 });

Answer 3

以下是一些建议的代码：

function highlightTexts() {
   var texts = [];
   $('td span').each(function(index){
       texts.push($(this).text());
       if( $(this).text().length !== 0 ){
          $(this).parent().css('background-color', 'yellow');
       }
   });
   var json = JSON.stringify(texts);
   sessionStorage.setItem('span-texts', json);
   // Cancel the form submission. Maybe you don't need this
   return false; 
}

$('#submit').click(highlightTexts);

$(function() {
   var json = sessionStorage.getItem('span-texts');
   if (json) {
       var texts = JSON.parse(json);
       $('td span').each(function(index){
           $(this).text(texts[index]);
       });
       highlightTexts();
   }
});

这是一个JS fiddle，它演示了您可以保存在刷新或重新访问同一页面时再次加载的文本。然后使用提交时使用的相同算法再次突出显示文本。

如何在网站刷新后检查跨度是否有价值

3 个答案: