Question

我需要进一步改进我的切换开/关链接图标，它将通过使用jquery通过类更改其背景位置来更改状态。此链接将由管理员在后端管理部分中进行操作。

jquery还需要更新数据库，然后在前端页面上反映这个选择的状态/选择，供用户查看，但不能从用户更改，因为它只是显示给用户的标记

我想知道的是，如何在前端页面中反映这一变化？我是否以某种默认颜色创建另一个SVG背景图像，然后通过CSS从数据库中更改此状态？

jquery＆＃39;帖子＆＃39;变量指向一个页面来反映变化（不知道如何在该页面中执行此操作！），但我需要在不同的页面上反映这一点，而不仅仅是一个......

后端编码将使用C＃完成，我只需要为前端的jquery部分创建基础，但我的知识非常有限。

我在这里提供的代码到目前为止，我只需要了解一些其他代码，如何在前端页面上反映这一变化，因为我不知道如何。

我希望有人能帮助我，因为我现在非常绝望......

＆＃13;

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

＆＃13;

body {
  background-color: #aaa;
}
.verify {
  text-indent: -5000px;
  display: block;
  background-image: url('http://imgh.us/social_4.svg');
  background-position: 0px 0px;
  height: 38px;
  width: 38px;
  border: 1px solid #000;
}
.verify.verified {
  background-position: 0px 38px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="ID_01">
  <p>
    <a href="#" class="verify">verify</a>
  </p>
</div>

＆＃13;

Answer 1

Server Sent Events Tutorial

服务器发送事件 - 单向消息传递服务器发送的事件是指网页自动从服务器获取更新。

之前也可以这样做，但网页必须询问是否有

有可用的更新。使用服务器发送的事件，更新会自动生成。

示例：Facebook / Twitter更新，股票价格更新，新闻源，体育赛事结果等。

**基本上工作流程就像这样**

管理员更改其页面和数据库中图标的状态
现在另一个带有c＃的页面定期查询数据库并广播内容采用以下格式

事件：userNameOrId \ n

数据：{＆＃34;状态＆＃34;：＆＃34; 1＆＃34;} \ n \ n
现在在客户端使用javascript听它

或

另一种方法是使用ajax long轮询方法示例

(function poll() { setTimeout(function() { $.ajax({ url: "yourpagename.aspx", success: function(data) { //here data contains the value returned from db //here check it with a if loop yes one color else one color if (data.verified) { $(this).addClass('verified'); }else{ $(this).removeClass('verified'); } }, dataType: "json", complete: poll }); }, 30000); })();

Check this w3schools Demo to see how it works Tutorial for long polling method

如何在管理面板页面上显示点击的开/关SVG图标，并在另一页

1 个答案: