切换开关状态链接图标

时间:2016-05-14 09:47:53

标签: jquery html css svg twitter-bootstrap-3

我创建了一个包含两个状态的链接,这两个状态的默认状态为[verify = false]和辅助状态[verified = true],并且将通过管理页面从管理员更改。 jquery将使用SVG图标切换此状态,并通过CSS更改其背景位置。

此链接图标选择仅在管理员已验证或未验证此用户的多个页面上静态显示。默认情况下它为[false]。

切换效果很好,我对此很满意,但是在“POST”变量中,我不知道如果选择的话,如何获取选择的一个(以及页面中的许多人?)的唯一ID在多个页面上反映这一点。我只需要为此执行前端脚本,然后后端开发人员将在C#中为db编写代码。

我认为我的代码中已经有了基础,但是“我要发布什么”以及如何在示例页面中显示从管理员中选择的静态图标?

我不熟悉jquery,所以我可能需要一些繁重的工作。我将使用社交图标进行实验..

override func preferredStatusBarStyle() -> UIStatusBarStyle {
    return .LightContent
}
$('.verify').click(function() {
  var id = $(this).parents('div').attr('id');
  $(this).toggleClass('verified');
  $.post('#', {
      'verified': $(this).hasClass('verified'),
      'id': ID_01
    },
    function(data) {
      if (data.verified) {
        $(this).toggleClass('verified');
      }
    });
});
body {
  background-color: #aaa;
}
.verify {
  text-indent: -5000px;
  display: block;
  background-image: url('http://imgh.us/social_4.svg');
  background-position: 84px 75px;
  height: 38px;
  width: 38px;
  border: 1px solid #000;
}
.verify.verified {
  background-position: 84px 38px;
}

1 个答案:

答案 0 :(得分:2)

不确定,为什么使用静态 ID_01 。将此替换为 id 。希望你能这样做。

$('.verify').click(function() {
  var id = $(this).parents('div').attr('id');
  $(this).toggleClass('verified');
  $.post('#', {
      'verified': $(this).hasClass('verified'),
      'id': id /* Updated */
    },
    function(data) {
      if (data.verified) {
        $(this).toggleClass('verified');
      }
    });
});