Как сделать кнопку меняющую текст при каждом нажатии на нее?

156

19 сентября 2019, 02:40

$("#bat1").click(function() { 
  $(this).val('night'); 
  $("div").toggleClass("night"); 
});

.tema { 
  background-color: lightblue; 
  height: 1000px; 
} 
 
.night { 
  background-color: gray; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="tema"> 
  <h1>body</h1> 
  <p id="demo">Lorem ipsum dolor</p> 
  <input id="bat1" type='button' value='svet'> 
</div>

Как сделать, чтобы после второго нажатия на кнопку, возвращался не только стиль div, но и текст кнопки снова становился "svet"

Answer 1

Можно, например, так:

$("#bat1").click(function(){ 
  $(this).val( $(this).val() == 'svet' ? 'nigth' : 'svet' ); 
  $("div").toggleClass("night"); 
});

.tema { 
  background-color: lightblue; 
  height: 1000px; 
} 
 
.night { 
  background-color: gray; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="tema"> 
  <h1>body</h1> 
  <p id="demo">Lorem ipsum dolor</p> 
  <input id="bat1" type='button' value='svet'> 
</div>

А вообще, имхо, правильнее было бы на светлом фоне показывать "night", а на темном "svet". Это все таки кнопка, а не лейбл. Думаю, логичнее, если она отражает, в какое состояние перейти, а не текущее состояние.

Answer 2

$("#bat1").click(function() { 
  if ($(this).val() == "svet") { 
    $(this).val("night"); 
  } else { 
    $(this).val("svet"); 
  } 
  $("div").toggleClass("night"); 
});

.tema { 
  background-color: lightblue; 
  height: 1000px; 
} 
 
.night { 
  background-color: gray; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="tema"> 
  <h1>body</h1> 
  <p id="demo">Lorem ipsum dolor</p> 
  <input id="bat1" type='button' value='svet'> 
</div>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как обернуть одни теги исключая другие без множества?

Нужно обернуть все теги в блокеarticle-section-post, исключая некоторые

327

jQuery

Как добавить товары в корзину? Не добавляется два товара

144

jQuery

Расширить карусель на мобильном

Подскажите как карусель слева на мобильном сделать на всю страницу, как слайдерИли если у вас есть готовый пример, то поделитесь пожалуйста

135

jQuery

Спарсить csv файл с другой страницы

Возникла потребность в парсинге csv фала расположенного на другом сайтеНакидал ajax, но вот браузер ругается на CORS- мол файл должен располагаться...

158