Исходя из интернет-соединения, измените цвет кнопки на зеленый или серый

Я хочу, чтобы сама кнопка меняла свой цвет, когда он был подключен к Интернету (в зависимости от интернет-соединения), в зеленый цвет, в противном случае серый.

У меня есть скрипт 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.

Ответы

Ответ 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");
  }
});

Надеюсь, что это поможет

Ответ 2

Для этого можно использовать простой класс css:

$(document).on('click', '#check-connection', function(){
    var status = navigator.onLine ? 'online' : 'offline';
    this.className = 'status-'+status;
});
.status-online{ background-color: green; }
.status-offline{ background-color: grey; }
<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>