javascript - 迭代 CSS 类数组和点击切换类

Question

我有this code

问题是我需要在点击时切换类。我有课

.col

.col-1 / .col-2 / col-3 etc.

我需要点击右边的 .col-1/col-2 来申请一个扩展类，所以它想要

.col .col-1 .col-1--expand
.col .col-2 .col-2--expand

在我将它悬停在 CSS 中之前，它可以工作，但点击它就没有什么问题了。我搜索了一整天的 Javascript 和 jQuery 案例，但我还没有找到任何正确的解决方案。我学到的东西，我必须在 Javascript 中使用 forEach 函数，但 jQuery 中的解决方案也是我想要的。我在我的元素中尝试过类似的东西，但我仍然不擅长 Javascript :(

if (document.querySelector('.slider__col')) {
const expandElement = element.querySelectorAll('.slider__col')
expandElement.forEach(element => {
    element.addEventListener('click', function() {
        element.classList.toggle("");
    })
})

Answer 1

您可以使用正则表达式来匹配元素类并在单击时切换该元素上的展开类。

var matched = this.className.match(/col-\d{1,2}/);

这将在您的元素的类属性中找到所有类，这些类包含 col- 后跟最多两位数的任何数字，因此您可以满足 1-99 的要求。

matched.length && (matched = matched.pop())

.match() 返回一个匹配项数组，这样您就可以确定是否找到任何匹配项并将第一个匹配项从数组中弹出。

var expandClass = matched + '--expand';

因为你正在匹配，例如 col-1 你可以使用这个字符串并附加 --expand 使 col-1--expand 。

$(this).toggleClass(expandClass);

您可以使用 jQuery 的 toggleClass根据类的存在添加/删除 expandClass。请参阅 col-3 进行演示。

$(document).on('click', '.col', function () {
  var matched = this.className.match(/col-\d{1,2}/);
  if (matched.length && (matched = matched.pop())) {
    var expandClass = matched + '--expand';
    $(this).toggleClass(expandClass);
  }
});

.col {
  background-color: blue;
  color: white;
  padding: .25rem 1rem;
  margin: .25rem 0;
}

.col-1--expand,
.col-2--expand,
.col-3--expand,
.col-4--expand,
.col-5--expand,
.col-6--expand {
  background-color: green;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="grid">
  <div class="col col-1">1</div>
  <div class="col col-2">2</div>
  <div class="col col-3 col-3--expand">3</div>
  <div class="col col-4">4</div>
  <div class="col col-5">5</div>
  <div class="col col-6">6</div>
</div>