javascript - 我怎样才能阻止我的 JavaScript 也为 <nav> 元素提供 "is-selected"类名

Question

当我选择每个颜色选项卡时，图像会改变颜色。但是，当您错过选项卡或选择颜色选项卡或“a”元素的“nav”容器的任何其他部分时，它也会向其添加 is-select 类；意思是没有图像。非常沮丧，想知道如何停止为“nav”元素提供 is-select 类名，因为我只需要“a”元素。

HTML

<div class="tab-pane__swatch-container"> 
  <div class="tab-pane__swatch-content"> 
    <div class="tab-pane is-selected" id="red">
      <img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Red.png" alt="Red Versa" class="tab-pane__swatch-image">
    </div>              
    <div class="tab-pane" id="black">
      <img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Black.png" alt="Red Versa" class="tab-pane__swatch-image">
    </div>                          
  </div>

  <nav class="row-1 tab-pane__swatch-selector" id="js-swatch">
    <a href="#red" class="tab-pane__swatch-link tab-pane__swatch-link--red is-selected"></a>
    <a href="#black" class="tab-pane__swatch-link tab-pane__swatch-link--black"></a>
  </nav>  
</div>

CSS

.tab-pane__swatch-image {
  width: 90%;
}

.row-1 {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  list-style: none;
}

.tab-pane__swatch-link {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 0 20px 10px 0;
  background-color: blue;
  border: 2px solid #fff;
  box-shadow: 3px 1px 10px #a9a9a9;
  border-radius: 50%;
}

.tab-pane__swatch-link--red {
  background: #ff0000;
}

.tab-pane__swatch-link--black {
  background: #000;
}

.tab-pane {
  display: none;
}

.tab-pane.is-selected {
  display: table;
}

a.is-selected::before {
  content: '';
  color: #fff;
  position: absolute;
  display: initial;
  margin: 8px 0 0 15px;
  border-style: solid;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  height: 1rem;
  width: 0.5rem;
}

JS

function onSwatchClick(event) {
  let selectedSwatches = document.querySelectorAll('.is-selected');                   

  for(let i = 0; i < selectedSwatches.length; i++) {                            
    selectedSwatches[i].className = selectedSwatches[i].className.replace('is-selected', '');
  }

  event.preventDefault();   
  event.target.className += ' is-selected'; 
  document.getElementById(event.target.href.split('#')[1]).className += ' is-selected'; 
}

const elswatchClick = document.getElementById('js-swatch');                        
elswatchClick.addEventListener('click', onSwatchClick, false);

希望你能帮忙谢谢。

Answer 1

您的事件处理程序针对选项卡父元素，而不是单个选项卡触发器。因此，它没有正确更新元素类。

相反，我以 tab-pane__swatch-link 类为目标并循环遍历它们，将事件监听器附加到每个类。

function onSwatchClick(event) {
  let selectedSwatches = document.querySelectorAll('.is-selected');                   

  for(let i = 0; i < selectedSwatches.length; i++) {                            
    selectedSwatches[i].className = selectedSwatches[i].className.replace('is-selected', '');
  }

  event.preventDefault();   
  event.target.className += ' is-selected'; 
  document.getElementById(event.target.href.split('#')[1]).className += ' is-selected'; 
}

const elswatchClick = document.querySelectorAll('.tab-pane__swatch-link');                        
for (var i = 0; i < elswatchClick.length; i++) {
  elswatchClick[i].addEventListener('click', onSwatchClick, false);
}

.tab-pane__swatch-image {
  width: 90%;
}

.row-1 {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  list-style: none;
}

.tab-pane__swatch-link {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 0 20px 10px 0;
  background-color: blue;
  border: 2px solid #fff;
  box-shadow: 3px 1px 10px #a9a9a9;
  border-radius: 50%;
}

.tab-pane__swatch-link--red {
  background: #ff0000;
}

.tab-pane__swatch-link--black {
  background: #000;
}

.tab-pane {
  display: none;
}

.tab-pane.is-selected {
  display: table;
}

a.is-selected::before {
  content: '';
  color: #fff;
  position: absolute;
  display: initial;
  margin: 8px 0 0 15px;
  border-style: solid;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  height: 1rem;
  width: 0.5rem;
}

<div class="tab-pane__swatch-container"> 
  <div class="tab-pane__swatch-content"> 
    <div class="tab-pane is-selected" id="red">
      <img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Red.png" alt="Red Versa" class="tab-pane__swatch-image">
    </div>              
    <div class="tab-pane" id="black">
      <img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Black.png" alt="Red Versa" class="tab-pane__swatch-image">
    </div>                          
  </div>

  <nav class="row-1 tab-pane__swatch-selector" id="js-swatch">
    <a href="#red" class="tab-pane__swatch-link tab-pane__swatch-link--red is-selected"></a>
    <a href="#black" class="tab-pane__swatch-link tab-pane__swatch-link--black"></a>
  </nav>  
</div>