Question

我希望按钮本身在线时（基于互联网连接）更改为绿色，否则为灰色。

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

有人可以帮忙吗

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

这是工作小提琴：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");
  }
});

希望有所帮助

Answer 2

您可以使用简单的css类来执行此操作：

＆＃13;

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

＆＃13;

.status-online{ background-color: green; }
.status-offline{ background-color: grey; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="content">
    <a data-role="button" id="check-connection">
      Check internet connection
  </a>
</div>

＆＃13;

但是，如果你想要一个实时的决定，你可以使用浏览器提供的事件监听器，大多数支持这个（例如ie8 +）：

window.addEventListener("offline", function() { 
    $("#check-connection")[0].className = "status-offline"; 
});
window.addEventListener("online", function() { 
    $("#check-connection")[0].className = "status-online"; 
});

有关MDN的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine

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

2 个答案: