javascript - 选择使用 Javascript 悬停的卡片的更好方法

Question

我必须编码。一个工作正常，但我正在寻找一种更好的方法来迭代脚本。

我需要代码来更改鼠标悬停在卡上的当前活动类，然后适当地替换图像框。

下面是可以正常工作的代码。

function cardHover(t){

    const cardItemAll = document.querySelectorAll('.card__item');
    const cardImageAll = document.querySelectorAll('#cardImage');
    const cardFirstChild = document.querySelector('.card__item:nth-child(1)');
    const cardSecondChild = document.querySelector('.card__item:nth-child(2)');
    const cardThirdChild = document.querySelector('.card__item:nth-child(3)');
    const imageFirstChild = document.querySelector('#cardImage:nth-child(1)');
    const imageSecondChild = document.querySelector('#cardImage:nth-child(2)');
    const imageThirdChild = document.querySelector('#cardImage:nth-child(3)');

    cardItemAll.forEach(e => {

        if (e.classList.contains('active')) {

            e.classList.remove('active');            
        }
        
    });

    t.classList.add('active');

    if (t == cardFirstChild) {

        cardImageAll.forEach(e => {

            if (e.classList.contains('active')) {
    
                e.classList.remove('active');            
            }
            
        });

        imageFirstChild.classList.add('active');

        console.log(t);

    }

    if (t == cardSecondChild) {

        cardImageAll.forEach(e => {

            if (e.classList.contains('active')) {
    
                e.classList.remove('active');            
            }
            
        });

        imageSecondChild.classList.add('active');

        console.log(t);

    }

    if (t == cardThirdChild) {

        cardImageAll.forEach(e => {

            if (e.classList.contains('active')) {
    
                e.classList.remove('active');            
            }
            
        });

        imageThirdChild.classList.add('active');

        console.log(t);

    }

}

.card {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 7fr 3fr;
      grid-template-columns: 7fr 3fr;
  -webkit-column-gap: 1.5rem;
          column-gap: 1.5rem;
}

.card__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (auto)[3];
      grid-template-rows: repeat(3, auto);
  row-gap: 1.5rem;
}

.card__item {
  background-color: #f5e7d9;
  border-radius: 0.5rem;
  padding: 1.5rem;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.card__item.active, .card__item:hover {
  background-color: #d0b28f;
}

.card__item.active h2, .card__item.active p, .card__item:hover h2, .card__item:hover p {
  color: #3e2e1b;
}

.card__item__title, .card__item__lead {
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}

.card__image {
  position: relative;
}

.image {
  position: absolute;
  background-color: #d0b28f;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  top: 0;
  left: 0;
}

.image-1 {
  background-image: url(https://images.pexels.com/photos/3032153/pexels-photo-3032153.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  opacity: 0;
  -webkit-transition: opacity 0.3 ease-in-out;
  transition: opacity 0.3 ease-in-out;
}

.image-1.active {
  opacity: 1;
}

.image-2 {
  background-image: url(https://images.pexels.com/photos/5776286/pexels-photo-5776286.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  opacity: 0;
  -webkit-transition: opacity 0.3 ease-in-out;
  transition: opacity 0.3 ease-in-out;
}

.image-2.active {
  opacity: 1;
}

.image-3 {
  background-image: url(https://images.pexels.com/photos/4985297/pexels-photo-4985297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  opacity: 0;
  -webkit-transition: opacity 0.3 ease-in-out;
  transition: opacity 0.3 ease-in-out;
}

.image-3.active {
  opacity: 1;
}

<div class="card container">

            <div class="card__list">
    
                <div class="card__item active" onmouseover="cardHover(this)">
                    <h2 class="card__title">Building Brand</h2>
                    <p class="card__lead">Anim aliqua nostrud cillum ea duis commodo sint consectetur et occaecat exercitation. Consectetur ut occaecat qui quis. Qui veniam fugiat est ullamco velit cupidatat est pariatur.</p>
                </div>
    
                <div class="card__item" onmouseover="cardHover(this)">
                    <h2 class="card__title">Building Brand</h2>
                    <p class="card__lead">Anim aliqua nostrud cillum ea duis commodo sint consectetur et occaecat exercitation. Consectetur ut occaecat qui quis. Qui veniam fugiat est ullamco velit cupidatat est pariatur.</p>
                </div>
    
                <div class="card__item" onmouseover="cardHover(this)">
                    <h2 class="card__title">Building Brand</h2>
                    <p class="card__lead">Anim aliqua nostrud cillum ea duis commodo sint consectetur et occaecat exercitation. Consectetur ut occaecat qui quis. Qui veniam fugiat est ullamco velit cupidatat est pariatur.</p>
                </div>
    
            </div>
    
            <div class="card__image">
    
                <div id="cardImage" class="image image-1 active"></div>
                <div id="cardImage" class="image image-2"></div>
                <div id="cardImage" class="image image-3"></div>
    
            </div>

        </div>

我想要改进的是 javascript 发现卡被悬停然后显示正确图片的方式。

这是我正在尝试改进的 Javascript

function cardHover(t){

    const cardItemAll = document.querySelectorAll('.card__item');
    const cardImageAll = document.querySelectorAll('#cardImage');
    const imageNthChild = document.querySelectorAll('#cardImage:nth-child(n)');
    const imageArray = Array.prototype.slice.call(imageNthChild);

    cardItemAll.forEach(e => {

        if (e.classList.contains('active')) {

            e.classList.remove('active');            
        }
        
    });

    t.classList.add('active');

    imageArray.forEach(function(i) {

        cardImageAll.forEach(e => {

            if (e.classList.contains('active')) {
    
                e.classList.remove('active');
    
                e.classList.remove('show');  

                e.classList.add('hide'); 

            } else {

                if (e.classList.contains('hide')) {

                    e.classList.remove('hide');

                }

            }
            
        });

        if(this.addEventListener("mouseover", function(c) {

            c.classList.remove('hide');
    
            c.classList.add('show');
    
            c.classList.add('active');

            console.log(c);
            
        })) {           
    
            console.log(i);

        }
        
    });

    for (i = 0; i < imageArray.length; i++) {

        console.log(imageArray[i]);

        cardImageAll.forEach(e => {

            if (e.classList.contains('active')) {
    
                e.classList.remove('active');
    
                e.classList.remove('show');  

                e.classList.add('hide');            
            }
            
        });

        if (t == imageArray[i]) {
    
            imageArray[i].classList.remove('hide');
            
            imageArray[i].classList.add('show');
    
            imageArray[i].classList.add('active');
    
            console.log(imageArray[i]);
    
        }

    }
    
   }

任何帮助，将不胜感激

标签： javascriptjavahtmlarraysnodelist