如何从以前单击的列表项中删除样式

Question

I'm attempting to make a calendar so that when you click the number of the day, 3 booking times appear below for the user to pick from.我正在尝试制作一个日历，以便当您单击当天的数字时，下方会显示 3 个预订时间供用户选择。 My issue is that with my code if you select the day it will style it to be green, but I don't know how to remove the style from that day if the user were to pick a different day.我的问题是，如果你选择了我的代码，它会将其样式设置为绿色，但如果用户选择不同的日期，我不知道如何从那天删除样式。 Any help would be great.任何帮助都会很棒。

example例子

HTML: HTML：

<body onLoad="getMonth()">
<div id="container">
    <p id="month">MONTH</p>
    <div id="fullDiv">
        <ul class="days">
            <li>SUN</li>
            <li>MON</li>
            <li>TUE</li>
            <li>WED</li>
            <li>THUR</li>
            <li>FRI</li>
            <li>SAT</li>
            <li onclick="check(1);remStyle(event);">1</li>
            <li onclick="check(2);remStyle(event);">2</li>
            <li onclick="check(3);remStyle(event);">3</li>
            <li onclick="check(4);remStyle(event);">4</li>
            <li onclick="check(5);remStyle(event);">5</li>
            <li onclick="check(6);remStyle(event);">6</li>
            <li onclick="check(7);remStyle(event);">7</li>
            <li onclick="check(8);remStyle(event);">8</li>
            <li onclick="check(9);remStyle(event);">9</li>
            <li onclick="check(10);remStyle(event);">10</li>
            <li onclick="check(11);remStyle(event);">11</li>
            <li onclick="check(12);remStyle(event);">12</li>
            <li onclick="check(13);remStyle(event);">13</li>
            <li onclick="check(14);remStyle(event);">14</li>
            <li onclick="check(15);remStyle(event);">15</li>
            <li onclick="check(16);remStyle(event);">16</li>
            <li onclick="check(17);remStyle(event);">17</li>
            <li onclick="check(18);remStyle(event);">18</li>
            <li onclick="check(19);remStyle(event);">19</li>
            <li onclick="check(20);remStyle(event);">20</li>
            <li onclick="check(22);remStyle(event);">22</li>
            <li onclick="check(23);remStyle(event);">23</li>
            <li onclick="check(24);remStyle(event);">24</li>
            <li onclick="check(25);remStyle(event);">25</li>
            <li onclick="check(26);remStyle(event);">26</li>
            <li onclick="check(27);remStyle(event);">27</li>
            <li onclick="check(28);remStyle(event);">28</li>
            <li onclick="check(29);remStyle(event);">29</li>
            <li onclick="check(30);remStyle(event);">30</li>
            <li onclick="check(31);remStyle(event);">31</li>
        </ul>
    </div>

Javascript: Javascript：

function check(value) {
  day = value;
  document.getElementById("bookingTimes").style.visibility = "visible";
  var content = document.getElementsByTagName("li");
  if (day == value) {
    content[day + 6].style.backgroundColor = "#1abc9c";
    content[day + 6].style.color = "#ecf0f1";
  }

  return day;
}

Answer 1

You could add a class to the element when selected and then remove the class from all elements with a querySelectorAll call.您可以在选择时向元素添加一个类，然后使用 querySelectorAll 调用从所有元素中删除该类。

.selected
{
  background-color: #1abc9c;
  color: #ecf0f1;
}

function check(value) {
  document.querySelectorAll(".selected").forEach(x => x.className = "");
  day = value;
  document.getElementById("bookingTimes").style.visibility = "visible";
  var content = document.getElementsByTagName("li");
  if (day == value) {
    content[day + 6].className = "selected";
    
  }

  return day;
}

Or you could keep track of the selected element.或者您可以跟踪所选元素。

var selected;

function check(value) {
  
  if(typeof(selected) != "undefined")
  {
    selected.style.backgroundColor = "white";
    selected.style.color = "black";
  }

  day = value;
  document.getElementById("bookingTimes").style.visibility = "visible";
  var content = document.getElementsByTagName("li");
  if (day == value) {
    content[day + 6].style.backgroundColor = "#1abc9c";
    content[day + 6].style.color = "#ecf0f1";
    selected = content[day + 6];
  }

  return day;
}

如何从以前单击的列表项中删除样式

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-22 00:28:46

如何从以前单击的列表项中删除样式

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-22 00:28:46

解决方案1
1 已采纳 2020-11-22 00:28:46