如何解决javascript 两个事件一个函数
当检测到事件之一运行函数时,如何侦听单击和鼠标悬停事件?
//show image by color
function showImage(imgPath,imgText,mainImgId,element) {
let thumb = document.getElementsByClassName("colors-li");
for (let i = 0; i < thumb.length; i++) {
thumb[i].classList.remove("active");
}
element.classList.add("active");
let curImage = document.getElementById(mainImgId);
curImage.src = imgPath;
curImage.alt = imgText;
curImage.title = imgText;
}
<div class="d-flex flex-row justify-content-center ">
<a class="product-img" href="#"><img src="img/products/product.jpg" id="3" alt=""></a>
<div class="color-slider ms-auto d-flex flex-column justify-content-center ">
<div class="btn color-prev m-0 p-0"><i class="bi bi-chevron-up"></i></div>
<div class="swiper-container color-slides">
<ul class="colors d-flex flex-column m-0 p-0 swiper-wrapper">
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-gift.jpg','gift',3,this);" onmouSEOver="showImage('img/products/product-gift.jpg',this);"><img src="img/products/product-thumb-gift.jpg" alt="gift"></li>
<li class="colors-li active p-0 swiper-slide" onclick="showImage('img/products/product.jpg','product',this);" onmouSEOver="showImage('img/products/product.jpg',this);"><img src="img/products/product-thumb.jpg" alt="product"></li>
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-green.jpg','green',this);" onmouSEOver="showImage('img/products/product-green.jpg',this);"><img src="img/products/product-thumb-green.jpg" alt="green"></li>
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-yellow.jpg','yellow',this);" onmouSEOver="showImage('img/products/product-yellow.jpg',this);"><img src="img/products/product-thumb-yellow.jpg" alt="yellow"></li>
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-purple.jpg','purple',this);" onmouSEOver="showImage('img/products/product-purple.jpg',this);"><img src="img/products/product-thumb-purple.jpg" alt="purple"></li>
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-orange.jpg','orange',this);" onmouSEOver="showImage('img/products/product-orange.jpg',this);"><img src="img/products/product-thumb-orange.jpg" alt="orange"></li>
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-black.jpg','black',this);" onmouSEOver="showImage('img/products/product-black.jpg',this);"><img src="img/products/product-thumb-black.jpg" alt="black"></li>
<li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-red.jpg','red',this);" onmouSEOver="showImage('img/products/product-red.jpg',this);"><img src="img/products/product-thumb-red.jpg" alt="red"></li>
</ul>
</div>
<div class="btn color-next m-0 p-0"><i class="bi bi-chevron-down"></i></div>
</div>
</div>
请帮我减少其中之一:
onclick="showImage('img/products/product-red.jpg',this);"
onmouSEOver="showImage('img/products/product-red.jpg',this);"
解决方法
我会这样做:
与Using data attributes
const cColorLi_list = document.querySelectorAll('li.colors-li')
;
function showImage(elmLI)
{
elmLI.closest('ul')
.querySelectorAll('li.colors-li')
.forEach(eLI => eLI.classList.toggle('active',(elmLI===eLI)))
let curImage = document.getElementById(elmLI.dataset.ref)
curImage.src = elmLI.dataset.img
curImage.alt = curImage.title = elmLI.querySelector('img').alt
}
cColorLi_list.forEach(cLi=>
{
cLi.onclick=()=> showImage(cLi)
cLi.onmouseover=()=> showImage(cLi)
})
<div class="d-flex flex-row justify-content-center ">
<a class="product-img" href="#"> <img src="img/products/product.jpg" id="3" alt=""></a>
<div class="color-slider ms-auto d-flex flex-column justify-content-center ">
<div class="btn color-prev m-0 p-0"><i class="bi bi-chevron-up"></i></div>
<div class="swiper-container color-slides">
<ul class="colors d-flex flex-column m-0 p-0 swiper-wrapper">
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-gift.jpg" data-ref="3" >
<img src="img/products/product-thumb-gift.jpg" alt="gift">
</li>
<li class="colors-li active p-0 swiper-slide" data-img="img/products/product.jpg" data-ref="3" >
<img src="img/products/product-thumb.jpg" alt="product" >
</li>
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-green.jpg" data-ref="3" >
<img src="img/products/product-thumb-green.jpg" alt="green">
</li>
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-yellow.jpg" data-ref="3" >
<img src="img/products/product-thumb-yellow.jpg" alt="yellow">
</li>
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-purple.jpg" data-ref="3" >
<img src="img/products/product-thumb-purple.jpg" alt="purple">
</li>
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-orange.jpg" data-ref="3" >
<img src="img/products/product-thumb-orange.jpg" alt="orange">
</li>
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-black.jpg" data-ref="3" >
<img src="img/products/product-thumb-black.jpg" alt="black">
</li>
<li class="colors-li p-0 swiper-slide" data-img="img/products/product-red.jpg" data-ref="3" >
<img src="img/products/product-thumb-red.jpg" alt="red" >
</li>
</ul>
</div>
<div class="btn color-next m-0 p-0"><i class="bi bi-chevron-down"></i></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。