1

是否可以将我使用 jquery 所做的修改保存到 DOM 的元素中？我想要的是：在您插入十六进制代码介绍输入文本并更改“#div1”颜色后，当您重新加载页面时，您插入的颜色将被保存。这是我的代码：

<html>
<body>
<head>
<script type="text/javascript" src="jquery-1.9.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<div id="div1">


<input type="text" id="ui"/>
<input type="button" onclick="ct()" value="enter hex color"/>


</div>

<script type="text/javascript"> 
function ct(){ 
$('#div1').css('background-color', "#" + $('#ui').val());
} 


</script>

</body>
</html>
4

5 回答 5

2

创建一个简单的 JQuery cookie 来存储值。然后在页面加载时引用cookie！

我建议对按钮使用“id”，但此代码使用您的 HTML 示例代码和 JQuery 选择器

$(document).ready(function() { 

     //store value 
     $('input[type=button]').click( function () {
          $.cookie("color", null);  //clear cookie in order to set the value
          $.cookie("color", $('#ui').val() ); //set cookie
          $('#div1').css('background-color', "#" + $.cookie("color") ); 
     });

     //reference cookie to set the color, happens on every HTML page load
     $('#div1').css('background-color', "#" + $.cookie("color"));
 });
于 2013-05-16T06:27:07.813 回答
1

您可能正在寻找DOM 存储- 它可以在所有现代浏览器（包括 IE8）中使用。

由于您已经在使用 jQuery，请查看以下示例：

$(function() {
  // grab your elements
  var $div = $('#div1');
  var $input = $('#ui');
  var $button = $('#ui-save'); // TODO: add this id to the button

  // fetch value from storage
  var initial = window.localStorage && localStorage.getItem('background');
  // set to whatever was in storage, if any
  if (initial) {
    $div.css('background', initial);
  }
  // bind to the input
  $button.on('click', function() {
    var color = $input.val();
    window.localStorage && localStorage.setItem('background', color);
    $div.css('background', color);
  })
});

请注意，window.localStorage &&它可以在不知道 localStorage 的浏览器中工作。在这些浏览器中，颜色仍然是可编辑的，但不会在页面重新加载时保存。

于 2013-05-15T18:04:00.507 回答
0

您可以借助数据库或服务器端脚本或 cookie 来执行此操作。

当您点击提交时，您需要将该十六进制代码发送到数据库或其他数据存储服务。当您加载 html 页面时，它必须从数据库中查询该十六进制颜色。

它不会按原样工作。

于 2013-05-15T17:52:39.400 回答
0

仅使用客户端 javascript 技术，您将无法在下一页加载时实际更改输出 HTML 源代码。

但是，您可以通过 cookie 或 HTML5 localStorage 保留颜色选择，并在下一页加载时使用 javascript 再次应用它。

如果您确实想修改输出源代码，您可以设置一个服务器知道如何解释的 cookie 以更改输出源，或者您可以使用 AJAX 调用转到实际修改的脚本静态源代码文件或再次设置一些配置，以更改源代码的输出方式。

于 2013-05-15T17:54:56.973 回答
0

使用 cookie 是解决问题的最佳方法。

function ct(){ 
    if($('#ui').val() == " " && document.cookie != ""){
        var color = document.cookie;
    }elseif($('#ui').val() != " "){
        color = $('#ui').val();
        document.cookie = color;
    }else{
        color = "defaultcolor";
    }
    $('#div1').css('background-color',color );
}
于 2013-05-28T07:03:26.353 回答