javascript - 基于互联网连接将按钮颜色更改为绿色或灰色

Question

我希望按钮本身在在线时(基于互联网连接)将其颜色更改为绿色，否则为灰色。

我有一个 JS fiddle ，它提供了单击按钮的解决方案，我们可以通过警报查看我们是否在线/离线。

谁能帮忙

HTML:

<div data-role="page" id="index">
  <div data-theme="a" data-role="header">
    <h3>First Page</h3> <a href="#second" class="ui-btn-right">Next</a> </div>
  <div data-role="content"> <a data-role="button" id="check-connection">Check internet connection</a> </div>
</div>

jQuery:

$(document).on('pagebeforeshow', '#index', function() {
  $(document).on('click', '#check-connection', function() {
    var status = navigator.onLine ? 'online' : 'offline';
    (alert(status));
  });
});

参见 JSFiddle .

Answer 1

这是工作 fiddle :http://jsfiddle.net/dn7zjm41/

我刚刚添加了一个 if 语句:

if(status==="online") {
  $("#check-connection > span").css("background-color", "green");
} else if(status==="offline") {
  $("#check-connection > span").css("background-color", "gray");
} else {
  // the code for another scenario
}

如果你想在没有点击事件的情况下自动运行 - 这里是:http://jsfiddle.net/f6paa9xy/

在这种情况下，您的 Javascript 应该如下所示:

$(document).on('pagebeforeshow', '#index', function() {             
  var status = navigator.onLine ? 'online' : 'offline';
  alert(status);
  if(status==="online") {
    $("#check-connection > span").css("background-color", "green");
  } else if(status==="offline") {
    $("#check-connection > span").css("background-color", "red");
  }
});

希望对您有所帮助