priyal patel Ответов: 1

Onclick on 2nd button, я хочу, чтобы 1-я, а также 2-я кнопка были окрашены .

здесь у меня есть 3 поля,такие как температура,скромность, количество людей.
На поле-я температуры создали четыре кнопки,я хочу, чтобы функциональность, например onclick на 1-ю кнопку,Я хочу, чтобы 1-ю кнопку, чтобы сделать цветные, а также хранить значение '1' в переменной Session.аналогично кнопке на 2-ю кнопку,Я хочу, чтобы 1-й,2-й кнопки сделать цветные магазин N значение '2' в переменной Session .Функция onclick на 3-ю кнопку,Я хочу, 1я,2я,3я кнопками сделать цветные магазин N значение '3' в переменной Session .функция onclick на 4-ю кнопку,Я хочу, чтобы все кнопки сделать цветные магазин N значение '4' в переменной Session.я хочу, чтобы эта переменная сеанса была в моем php-файле для дальнейшего расчета.


то же самое я хочу для моей влажности, а также для количества людей на поле.как я могу это сделать??? любая помощь будет полезна!!

Что я уже пробовал:

<!DOCTYPE html>



.кнопка {

цвет фона: белый;
границы: 1px твердых черный;
белый цвет;
обивка: 8 Пикс 30 пикселей;
выравнивание текста: по центру;
текстовое оформление: нет;
дисплей: встроенный блок;
курсор: указатель;
поплавок: левый;
}




Температура











Влажность









количество людей







1 Ответов

Рейтинг:
0

dada2010

привет
я не уверен, что это то, что вы исключили, но я попробовал кодовый код здесь :


[код ручки]



<html>
  temp
  <button data-tp='temp' data-idx='1' class='bts'>1</button>
  <button data-tp='temp' data-idx='2' class='bts'>2</button>
  <button data-tp='temp' data-idx='3' class='bts'>3</button>
  <button data-tp='temp' data-idx='4' class='bts'>4</button>  
  <input data-tp='temp'  class='lastBtIdx'></input>
  
  hum
  <button data-tp='hum' data-idx='1' class='bts'>1</button>
  <button data-tp='hum'data-idx='2' class='bts'>2</button>
  <button data-tp='hum'data-idx='3' class='bts'>3</button>
  <button data-tp='hum' data-idx='4' class='bts'>4</button>  
  <input data-tp='hum' class='lastBtIdx'></input>

</html>


JS:
$('.bts').click(function(i,e){
  thistype = $(this).data('tp');
  
  $('.bts[data-tp=' + thistype + ']').removeClass('colorized') // raz colors
  
  thisidx = $(this).data('idx');

  // add class to buttons which index < button clicked
  $('.bts[data-tp=' + thistype + ']:lt(' + thisidx + ')').addClass('colorized')
  
  localStorage.setItem('lastIdxClicked_' + thistype, thisidx)
  // value in localStorage -> will need to send it to server code
  $('.lastBtIdx[data-tp=' + thistype + ']').val(localStorage.getItem('lastIdxClicked_' + thistype))  
}


небольшие CSS
button {
border: 0;
background-color: white;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;

}
.colorized {
  font-size:1.5em;
  background-color:green;
    color:white;
  transition: all 0.5s ease 0s;
}



- > две серии из 4 кнопок : кнопки каждой серии раскрашиваются, когда вы нажимаете на одну из серий. я ставлю на localStorage значение последней кнопки, вам нужно будет отправить его на серверный код с помощью ajax или чего-то еще