AddClass to multiple IDs

[rzulian]

I need to add a class to multiple IDs in response to an event. Do I need to hx-swap-oob all the elements or is there a better way to do this?

[rzulian]

I've been testing the class-tool extension, but it seems that there isn't a way to set a class change request on a parent and apply it to all matching children. Something like

<div hx-ext="class-tools" classes="remove bar:2s" >
        <button class="bar" id="btn1" >Btn1</button>
        <button id="btn2">Btn2</button>
</div>

I've a solution that works with a event listener

 document.body.addEventListener("evtHtmxHelper", function (evt) {
      // find all elements matching the selector
      var children = htmx.findAll( evt.detail.id );
      for (var i = 0; i < children.length; i++) {

        if (evt.detail.mode === "add") {
            htmx.addClass(children[i], evt.detail.className);
        }
        else if (evt.detail.mode === "remove") {
            htmx.removeClass(children[i], evt.detail.className);
        }
        else {
            console.error("unkown mode");
            return;
        }
      }
  });

that I can use from a view : trigger_client_event(response, "evtHtmxHelper", {"id": "#btn1,#btn2", "mode": "remove", "className": "clickable"})

Is there a better way to do this?

[back-2-95]

Not totally sure if this is the same case. I find all children under this (in eventListener) which are spans with class foobar.
Then I go through it with forEach and then I use htmx.toggleClass to show/hide elements.

htmx.findAll(this, 'span.foobar').forEach(function(child) {
    htmx.toggleClass(child, 'hidden');
  });