如何解决选择使用 Javascript 悬停的卡片的更好方法
我必须编码。一个工作正常,但我正在寻找一种更好的方法来迭代脚本。
我需要代码来更改鼠标悬停在卡片上的当前活动类,然后适当地替换图像框。
下面是运行良好的代码。
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]);
}
}
}
任何帮助将不胜感激
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。