Question

我有一个项目列表（ul, li），该类具有一个类，当您单击该项目时，该类设置了左边框和粗体突出显示。

当您单击列表中的其他项目时，我想将样式重置为原始项目，以使其恢复正常，然后在刚刚单击的活动样式上设置新样式。

奇怪的是，DOM检查显示以前单击的项目仍然具有更改的类，但是当我输出到控制台时，它说没有。

 function myFunctionTest(id_word) {
  var items = document.getElementsByClassName("process-itemz");
         for (var i = items.length - 1; i >= 0; --i) {
         items[i].classList.remove("test123");
}

var element = document.getElementById(id_word);
  element.classList.add("test123");

}

还有一个小提琴：https://jsfiddle.net/y5kwmu6j/

Answer 1

两件事：

element.classList.add = "test123";应该是element.classList.add("test123");

您应该更改css规则的顺序，以使.test123规则位于.process-itemz规则之后。它们具有相同的特异性水平，因此以后的那些将获胜。

Answer 2

如前所述，需要对语法进行一些更改，并且我重新格式化了循环。

附件的代码段有效-请确保您的JavaScript已链接到HTML文件中，或已嵌入脚本标签之间。

function myFunctionTest(id_word) {
  alert(1);
  var items = document.getElementsByClassName("process-itemz");
  for (var i = 0; i < items.length - 1; i++) {
    items[i].classList.remove("test123");
  }

  var element = document.getElementById(id_word);
  element.classList.add("test123");

}

.default {
  font-weight: 200;
}

.test123 {
  border-left: 1rem solid rgba(167, 194, 15, 0.623);
  font-weight: bold;
}

.process-itemz {
  border-left: 1rem solid rgba(167, 194, 15, 0);
  font-weight: inherit;
}

<div class="default">
  <ul id="foo">
    <li>

      <span onclick="myFunctionTest(this.id)" id="testa123" class="process-itemz">&ThickSpace;&ThickSpace;&ThickSpace;&ThickSpace;
                   Excavation Hire
                  </span>
    </li>
    <li>


      <span onclick="myFunctionTest(this.id)" id="testb123" class="process-itemz">&ThickSpace;&ThickSpace;&ThickSpace;&ThickSpace; Rubbish Removal</span>
    </li>
  </ul>
</div>

Answer 3

作为另一个建议的答案，您将想要更改CSS选择器的顺序。由于它们具有相同的优先级，因此WITH CTE_1 AS (SELECT ID, Date, Min_Predict, Max_Predict, Interval ,ROW_NUMBER() OVER (PARTITION BY ID ORDER BY Date) AS row_num FROM table), CTE_2 AS (SELECT Date, Min_Predict, Max_Predict, SUM(Min_Predict) OVER (ORDER BY Date) AS Min, SUM(Max_Predict) OVER (ORDER BY Date) AS Max FROM CTE_1 WHERE row_num = 1 AND Interval = 'A') SELECT Date, Min, Max From CTE_2 GROUP BY Date, Min, Max ORDER BY Date选择器将覆盖Row ProgressDate EstMin EstMax 1 2017-07-21T00:00:00Z 0.125 0.25 2 2017-07-24T00:00:00Z 5.125 5.375 3 2017-07-25T00:00:00Z 8.75 10.25 4 2017-07-26T00:00:00Z 10.0 12.0 5 2017-07-27T00:00:00Z 10.5 12.75 6 2017-08-01T00:00:00Z 15.25 19.125 7 2017-08-02T00:00:00Z 15.5 19.375 8 2017-08-05T00:00:00Z 16.25 20.625中的所有内容。

另一个建议是像这样实际组合类选择器：

.process-items

在这种情况下，在css中顺序无关紧要，因为此选择器将始终更加具体。

See "How is specificity calculated?" on MDN

根据您的使用情况，您的里程可能会有所不同。

.test123

.process-itemz.test123

function myFunctionTest(id_word) {
  var items = document.getElementsByClassName("process-itemz");
  for (var i = items.length - 1; i >= 0; --i) {
    items[i].classList.remove("test123");
  }

  var element = document.getElementById(id_word);
  element.classList.add("test123");
}

元素修饰符classList.add和classList.remove无法按预期工作

3 个答案: