jQuery 个饼干 (HTML)

Question

我有一个模态框，它会在页面加载时打开。我希望当我点击模式上的按钮时，它会改变我的导航栏的背景颜色。但我想用 cookie 来做，这样背景颜色就应该保留。

模态：

$(document).ready(function() {
    $("#fg").click(function() {
        $("#nav").css({
          $.cookie('background', 'gray');
          
          });
        
       
    });
});

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        
        <h4 class="modal-title" id="exampleModalLabel">Choose Design</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
  <div id="fg"><span class="label label-primary" data-dismiss="modal">Dark</span></div>
          </div>
          <div class="form-group">
  <div id="fg2"><span class="label label-info" data-dismiss="modal">Light</span></div>
          </div>
          <div class="form-group">
  <div id="fg3"><span class="label label-default" data-dismiss="modal">Gray</span></div>
          </div>
        </form>
      </div>
      <div class="modal-footer">

      </div>
    </div>
  </div>
</div>

但是 jQuery 代码不起作用。有帮助吗？

Answer 1

您没有正确设置 background-color。

代码

//on page load read cookie, if value exists set color
var color = $.cookie('background');
if (color) {
    //set color
    $("#nav").css({
        "background-color": color
    });
}
//Bind click handlers
$("#fg").click(function() {
    //Get color text
    var bgColor = $(this).find('span').text().trim();
    //Set cookie value
    $.cookie('background', bgColor)
        //set color
    $("#nav").css({
        "background-color": bgColor
    });
});

Answer 2

您实际上是在设置 cookie，而不是在读取。

要读取 cookie，请使用：

var background = $.cookie('background');

我会将 data-background 和 class="bg-change" 添加到 div，这样您就不必为每种颜色都重复 .click()。 :

<form>
    <div class="form-group">
        <div data-background="#000" class="bg-change"><span class="label label-primary" data-dismiss="modal">Dark</span></div>
    </div>
    <div class="form-group">
        <div data-background="#fff" class="bg-change"><span class="label label-info" data-dismiss="modal">Light</span></div>
    </div>
    <div class="form-group">
        <div data-background="#ccc" class="bg-change"><span class="label label-default" data-dismiss="modal">Gray</span></div>
    </div>
</form>

脚本（所有颜色的单击事件）：

$(".bg-change").click(function() {
    var col = $(this).data('background');
    $.cookie('background', col , { expires: 365, path: '/' }); 
    $("#nav").css({
       'background' : col   
    });  
});

如果不需要服务器端处理，请考虑使用 localStorage 而不是 cookie。

jQuery 个饼干 (HTML)

jQuery cookies (HTML)

html

cookies

jquery

navbar