根据更改的跨度类显示div

Answer 1

找到包含跨度和委托的最近容器

window.addEventListener('DOMContentLoaded',() => { // when page has loaded
  const container = document.getElementById('someContainer'); // change as needed 
  container.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    console.log(tgt.textContent, 'clicked')
  });

// somewhere else out of your control
  document.addEventListener('click', (e) => {
    const tgt = e.target.closest('span.swatch');
    if (!tgt) return; // not a swatch
    document.querySelectorAll('span.swatch').forEach(span => span.classList.toggle('selected',span===tgt))
  });



});

.selected { border: 1px solid red; }

<div id="someContainer">
...

<span class="swatch swatch-image span1 selected">Span 1</span>
<span class="swatch swatch-image span2">Span 2</span>


...
</div>