更改图像并为活动菜单/按钮添加类

Question

我目前正在创建可以在鼠标悬停并单击时更改图像的按钮。活动按钮应添加活动类，并在单击其他按钮时将其删除。

我试过了，但是好像不行。

jQuery(document).ready(function($) {
  $('.button-one').on('click mouseover', function() {
    $('#change-image').attr('src', '/image-1.png');
    $('.button-one').removeClass('btn-active');
    $(this).addClass('btn-active');
  });
  
  $('.button-two').on('click mouseover', function() {
    $('#change-image').attr('src', '/image-2.png');
    $('.button-one').removeClass('btn-active');
    $(this).addClass('btn-active');
  });
  
  $('.button-three').on('click mouseover', function() {
    $('#change-image').attr('src', '/image-3.png');
    $('.button-one').removeClass('btn-active');
    $(this).addClass('btn-active');
  });
});

.button-container ul {
  display: flex;
}

.btn li a {
  padding: 9px 18px;
  margin-right: 1em;
  background: #8a8c8e;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
  border: none;
  display: block;
}

.btn li a:hover {
  background: #ee2e24;
  color: #ffffff;
  display: block;
}

.btn li a.btn-active {
  background: #ee2e24;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container"><img id="change-image" src="/image-1.png" alt="Image 1" /></div>
<div class="button-container">
  <ul class="btn">
    <li><a class="button-one">Image 1</a></li>
    <li><a class="button-two">Image 2</a></li>
    <li><a class="button-three">Image 3</a></li>
  </ul>
</div>

Answer 1

问题是因为您没有从每个重复的 hover/click 函数的所有元素中删除 btn-active 类。

要解决此问题并改进代码，您可以在button 元素上使用一个通用类来按行为对它们进行分组。然后，您可以使用单个事件处理程序根据引发事件的元素更新 img src。要存储图像路径，您可以在按钮上使用data 属性来存储图像路径元数据。

使用这种模式意味着 JS 可以为无限数量的按钮工作，而无需创建 N 个新的 JS 函数或事件处理程序。

jQuery($ => {
  $('.button').on('click mouseover', e => {
    let $btn = $(e.target);
    $('#change-image').attr('src', $btn.data('imgsrc'));
    $('.button').removeClass('btn-active');
    $btn.addClass('btn-active');
  });
});

.button-container ul {
  display: flex;
}

.btn li a {
  padding: 9px 18px;
  margin-right: 1em;
  background: #8a8c8e;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
  border: none;
  display: block;
}

.btn li a:hover {
  background: #ee2e24;
  color: #ffffff;
  display: block;
}

.btn li a.btn-active {
  background: #ee2e24;
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container"><img id="change-image" src="https://via.placeholder.com/100x100.png?text=Image 1" alt="Image" /></div>
<div class="button-container">
  <ul class="btn">
    <li><a class="button btn-active" data-imgsrc="https://via.placeholder.com/100x100.png?text=Image 1">Image 1</a></li>
    <li><a class="button" data-imgsrc="https://via.placeholder.com/100x100.png?text=Image 2">Image 2</a></li>
    <li><a class="button" data-imgsrc="https://via.placeholder.com/100x100.png?text=Image 3">Image 3</a></li>
  </ul>
</div>

Answer 2

我尝试在纯 JavaScript 中执行此操作。 我在每个将类名作为参数传递的按钮上添加了 onclick 事件，与应用“btn-active”类进行比较。

const makeActive = (btnClass) => {
    let btns = [];
    btns[0] = document.querySelector(".button-one"); 
    btns[1] = document.querySelector(".button-two");
    btns[2] = document.querySelector(".button-three");

    for(let i=0; i<btns.length; i++){
        if(btns[i].classList.contains(btnClass)){
            btns[i].classList.add('btn-active');
        }else{
            btns[i].classList.remove('btn-active');
        }
    }
}

.button-container ul {
    display: flex;
}
.btn li a {
    padding: 9px 18px;
    margin-right: 1em;
    background: #8a8c8e;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    border: none;
    display: block;
}
.btn li a:hover {
    background: #ee2e24;
    color: #ffffff;
    display: block;
}

.btn li a.btn-active {
    background: #ee2e24;
    color: #ffffff;
}

<div class="button-container">
    <ul class="btn">
    <li><a class="button-one" onclick="makeActive(this.getAttribute('class'))">Image 1</a></li>
    <li><a class="button-two" onclick="makeActive(this.getAttribute('class'))">Image 2</a></li>
    <li><a class="button-three" onclick="makeActive(this.getAttribute('class'))">Image 3</a></li>
    </ul>
</div>