Question

我正在尝试创建动态日历。我的第一步是在单击时将类添加到某些元素上。但是，在此过程中遇到了一个问题，classList.add（''）;。无法在HTML中使用。我不确定自己做错了什么。

<ul class="days">
  <li onClick='#'>1<li>
  <li onclick="this.classList.add('active')">2</li>
  <li onClick='#'>3</li>
  <li onClick='#'>4</li>
  <li onClick='#'>5</li>
  <li onClick='#'>6</li>
  <li onClick='#'>7</li>
  <li onClick='#'>8</li>
  <li onClick='#'>9</li>
  <li onClick='#'><span class="active">10</span></li>
</ul>

CSS

  /* Highlight the "current" day */
   .days li .active {
      padding: 5px;
      background: #1abc9c;
      color: white 
   }

我正在尝试将onclick事件应用于数字2。但是classList.add（''）;不工作。我确信这是有原因的。任何帮助将不胜感激。

Answer 1

由于您的CSS规则或DOM而无法使用。

.days li .active将样式应用于类<li>的{{1}}的子节点上，但是使用active，您将this.classList.add('active')类添加到{ {1}}标签，CSS规则应为active。

Answer 2

您的CSS选择器错误，您需要删除</script>和public int getMatchingCustomerRecords(String keyword) { int rows = 0; try { if (db.startTransaction()) { String sql = "Select COUNT(firstName OR lastName) AS TOTAL FROM Customer"; String sqlSearch = ""; if (keyword != null) { sqlSearch = sql + " WHERE firstName LIKE '%" + keyword + "%' AND lastName LIKE '%" + keyword + "%'"; ps = db.getQueryStatement(sqlSearch); } else { ps = db.getQueryStatement(sql); } rs = ps.executeQuery(); if (rs.next()) { rows = rs.getInt("TOTAL"); } } } catch (SQLException e) { e.printStackTrace(); } return rows; }之间的空格

喜欢

li

Answer 3

首先，对于第一个li元素，您的html错误。

第二，我认为您可能被CSS选择器所误导，因为第10个li元素的内部具有跨度，而第2个li元素没有。看看这个小提琴

https://jsfiddle.net/h6w7kaoy/1/

HTML：

 <ul class="days">
      <li onClick='#'>1</li>
      <li onClick="this.classList.add('active')">2</li>
      <li onClick='#'>3</li>
      <li onClick='#'>4</li>
      <li onClick='#'>5</li>
      <li onClick='#'>6</li>
      <li onClick='#'>7</li>
      <li onClick='#'>8</li>
      <li onClick='#'>9</li>
      <li onClick='#'><span class="active">10</span></li>
    </ul>

CSS：

li.active, li span.active {
  color: blue;
  font-weight: bold;
}

如果您尝试从css选择器中删除li.active，将会看到单击li元素不会影响视觉效果（但仍在添加类；-)）

Answer 4

问题不在于classList，而是选择器。 .days li .active将选择active内所有类别为<li>的元素，而li则为.days类内的所有元素。黑白li和.active

不应有空格

.days li.active

为什么classList.add无法用于HTML onClick

4 个答案: