change class name after underscore using jquery on click

Question

I want to replace the class name with just the id clicked. But the condition is, there is the beginning of the class name ("filter-") I want to change.

For example:

<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>

When you click #first then filter- must be filter-first like this:

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

It can normally be done with addClass and removeClass. But is there a way to do this with regex?

Why do you want to use regex? Why *not* just add and remove the appropriate `filter-xxx` classes from the div? — Nick, Jul 03 '20 at 07:55
I just ask if there is such a method. Why isn't a rainbow a single color? :) — AlwaysStudent, Jul 03 '20 at 07:57

connexo · Answer 1 · 2020-07-03T12:46:39.917

No need for jQuery here.

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>

If for whatever reason you insist on using 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>

Thank you for your answer. But can the answer I am looking for be done with jquery. — AlwaysStudent, Jul 03 '20 at 08:14
I stopped using jQuery years ago, and never since found a single use-case where I wanted to use it. — connexo, Jul 03 '20 at 12:43

change class name after underscore using jquery on click

1 Answers1