时间戳

首页 > 解决方案 > 单击下划线后使用jquery更改类名

javascript - 单击下划线后使用jquery更改类名

问题描述

我想用单击的 id 替换类名。但条件是，我要更改的类名（“filter-”）的开头。

例如：

<div class="change filter-" id="changeMe"></div>
<div class="list">
     <div class="click" id="first"></div>
     <div class="click" id="second"></div>
     <div class="click" id="third"></div>
</div>

当你点击#firstthenfilter-必须是filter-first这样的：

<div class="change filter-first"></div>

它通常可以用addClass和来完成removeClass。但是有没有办法用正则表达式做到这一点？

标签： javascriptjquery

解决方案

这里不需要 jQuery。

const changeMe = document.getElementById('changeMe');

for (const listItem of document.querySelectorAll('.click')) {
  listItem.addEventListener('click', function() {
    changeMe.className = `change first-${listItem.id}`
  })
}
.click::before { content: attr(id); }

#changeMe::before { content: attr(class); }
<div class="change" id="changeMe"></div>
<hr>
<div class="list">
  <div class="click" id="first"></div>
  <div class="click" id="second"></div>
  <div class="click" id="third"></div>
</div>

如果出于某种原因你坚持使用 jQuery：

const $changeMe = $('#changeMe');

$('.click').on('click', function() {
  $changeMe.attr('class', `change first-${this.id}`);
})
.click::before {
  content: attr(id);
}

#changeMe::before {
  content: attr(class);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="change" id="changeMe"></div>
<hr>
<div class="list">
  <div class="click" id="first"></div>
  <div class="click" id="second"></div>
  <div class="click" id="third"></div>
</div>

推荐阅读