Когда я нажимаю кнопку, текст будет каждый раз меняться. Например, когда я перехожу на страницу, отображается «Закрыть». Если я нажму эту кнопку, ее значение изменится на «Открыть». Бывает и по-другому. Если я нажму «Открыть», он изменится на закрытие.

Однако проблема в том, что кнопка находится в состоянии «Открыть», и если я обновлю ее, она изменится на «Закрыть». Но если он находится в «Закрыть», и я нажимаю «Обновить», он не меняется на «Открыть».

Мне нужно, чтобы после каждого щелчка он менялся с открытого на закрытие или с закрытия на открытие. Но после обновления он также должен быть в том же состоянии. это не должно меняться. Как мне это сделать.

function changeStatus() {
  console.log("Hi");
  
  var val = document.getElementById("openClose").value;
  $.ajax({
    type: 'POST',
    url: '/change/me',
    data: {
      'val': val
    },
    success: function(result) {
      alert("The text has been changed");

    }
  })
}

$(".changeme").click(function() {
  $(this).text(function(i, text) {
    return text === 'Close' ? 'Open' : 'Close'
  })
})
<!--Stylesheets-->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />


<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-danger changeme" onclick="changeStatus()" id="openClose">Close</button>
</div>
5
user11862294 18 Авг 2020 в 11:05

4 ответа

Лучший ответ

Версия с локальным хранилищем (но вы не можете протестировать ее внутри сниппета , фрагмент не дает доступа к локальному хранилищу, но codepen делает) Демонстрация на codepen

let store = window.localStorage
function changeStatus() {
  let val 
  store.getItem('btnstat') === "Open"? checkUpdLocal("Close") : checkUpdLocal("Open") // toggle status
  
  val = store.getItem('btnstat')
  $.ajax({
    type: 'POST',
    url: '/change/me',
    data: {
      'val': val
    },
    success: function(result) {
      alert("The text has been changed");

    }
  })
}

function checkUpdLocal(stat){
  if(!store.getItem('btnstat')){ // if local storage does not exist
    store.setItem('btnstat', "Close") // close by default
  }else if(store.getItem('btnstat') && !stat){ // if storage exist but we don't change status (first ini) - change buttno text
    $('.changeme').html(store.getItem('btnstat'))
  }
  if(stat){ // setter
    store.setItem('btnstat', stat)
    $('.changeme').html(stat)
  }else{
    return store.getItem('btnstat') // getter
  }
}
$( document ).ready( function(){checkUpdLocal()})
<!--Stylesheets-->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />


<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-danger changeme" onclick="changeStatus()" id="openClose">Close</button>
</div>
2
Greg-- 20 Авг 2020 в 09:38

Вот пример использования sessionStorage для временного сохранения состояния.

Объект sessionStorage хранит данные только для одного сеанса (данные удаляются при закрытии вкладки браузера). sessionStorage не будет работать в старых браузерах, которые его не поддерживают.

    <script type="text/javascript">
            $(document).ready(function () {
                if (sessionStorage.getItem("changeState") == null) {
                    $(".changeme").text("Close");
                    sessionStorage.setItem("changeState", "Close");
                } else {
                    if (sessionStorage.getItem("changeState") === "Close") {
                        $(".changeme").text("Close");
                    } else {
                        $(".changeme").text("Open");
                    }
                }
    
                $(".changeme").click(function () {
                    if (sessionStorage.getItem("changeState") === "Close") {
                        $(this).text("Open");
                        sessionStorage.setItem("changeState", "Open");
                    } else {
                        $(this).text("Close");
                        sessionStorage.setItem("changeState", "Close");
                    }
                })
            });
   </script>
1
Sandeep 20 Авг 2020 в 09:19

Когда вы используете localStorage, вы должны проверить, было ли значение сохранено до

$( document ).ready(function(){
  if(localStorage.getItem("openClose")!==undefined){
    $('.changme').text(localStorage.getItem("openClose"));

});

(отредактировано, чтобы включить поиск в готовую функцию)

1
Bryn Lewis 20 Авг 2020 в 09:19

Это более старый способ, но вы также можете сохранить состояние в файле cookie.

Сохраните это с помощью:

   document.cookie = "Open";

При загрузке страницы получить ее с помощью `

   var state = document.cookie;

Хотя это очень неудобно; Я бы рекомендовал использовать библиотеку файлов cookie для управления ими.

0
Nathaniel Tagg 20 Авг 2020 в 15:14