單擊 javascript 中的多個事件

Question

伙計們需要一些幫助，我試圖弄清楚如何通過單擊來執行多個事件單擊另一張圖片，我需要單擊一次執行多個事件

 const current = document.querySelector('#current'); const imgs = document.querySelectorAll('.imgs img'); const main = document.querySelector('#main-info h3'); const info = document.querySelector('.info'); imgs.forEach(img => img.addEventListener('click', imgClick)); function imgClick(e) { current.src = e.target.src; }

 body { font-family: Arial, Helvetica, sans-serif; font: 15px/1.5; background-color: #f4f4f4; margin: 0; padding: 0; }.container { width: 90%; margin: auto; overflow: hidden; } header { display: flex; justify-content: space-between; padding-top: 5px; background-color: #567890; min-height: 130px; border-bottom: 3px #e0480c solid; padding: 0 20px 0 0; } header #branding { float: left; margin: 0; } header #branding img { margin: 0; padding: 0; } header ul { margin: 0; padding: 0; } header li { display: inline; float: left; padding: 0 20px 0 20px; margin-top: 50px; } header a { text-decoration: none; color: #ffffff; text-transform: uppercase; font-size: 16px; } header a:hover { color: #b9b8b9; opacity: 1; } header nav { float: right; padding-bottom: 50px; }.current a { color: #e0480c; font-weight: bold; } #showcase { min-height: 400px; background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.5)), url(/img/enseymada.jpg) no-repeat 0 -400px; text-align: center; background-size: cover; opacity: 0.9; } #showcase.main-info { margin-top: 100px; margin-bottom: 10px; justify-content: center; font-size: 50px; font-weight: 600; color: #fffcff; } #showcase p { font-size: 20px; font-weight: 200; color: #ccc; }.topinfo { text-align: center; justify-content: center; }.info2 { text-align: center; justify-content: center; } footer { width: 100%; bottom: 0; position: relative; }.foot { background: #e24305; color: #fff; height: 10px; margin: 0; width: 100%; text-align: center; padding: 7px 10px; justify-content: center; align-items: center; }.main-img img, .imgs img { margin: auto; width: 100%; background: cover; border-radius: 10%; }.imgs { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 5px; background: cover; cursor: pointer; }.wrapper { border: #444 solid 3px; max-width: 800px; margin: auto; height: 100%; padding: 5px; align-items: center; justify-content: center; overflow: hidden; }.newsletter { margin-bottom: 100px; padding: 0; width: 100%; height: 80px; align-items: center; justify-content: center; background-color: #567890; }.newsletter h1 { float: left; color: #ffffff; }.newsletter.btn { display: inline; margin: 20px 5px; padding: 10px; background-color: #444; color: #fff; border: none; }.newsletter #subscribe { padding: 10px; margin-left: 10px; border: none; }

 <div class="wrapper"> <div class="main-img"> <h3 id="main-info">Classic Enseymada</h3> <img src="img/image2.jpg" id="current"> </div> <div class="imgs"> <img src="img/image2.jpg"> <div class="info"> <img src="img/image3.jpg"> <h3>Nuttela</h3> </div> <img src="img/image4.jpg"> <img src="img/image6.jpg"> <img src="img/image7.jpg"> <img src="img/image8.jpg"> </div> </div> <footer><div class="foot">Copyright &copy Abby Cook's 2020</div></footer> <script src="./js/main.js"></script> </body> </html>

Answer 1

我假設您想將更多 arguments 傳遞給您的 imgClick function。 一種方法是使用匿名函數，這樣的事情應該可以解決問題：

    imgs.forEach(img => img.addEventListener('click', function(e){
        imgClick(e, 'param1', 'param2',);
    }));

    function imgClick(e, param1, param2,) {
    current.src = e.target.src;
    // your code
    }

然后在 function 中添加您的代碼。