3個元素上的滑鼠懸停功能僅在最后一個元素上起作用

我是 javascript 的新手，所以請注意。我已經在這個網站上搜索了這個問題的解決方案，但我找不到有效的解決方案。問題出在我的開發網站上：https ://famnabuurs.nl（它在主頁上）。我使用 Wordpress 和 DIVI，現在使用一些 javascript。我創建的三列具有類似的設定。這些列都有一個 id，所以我可以管理行為。當您將滑鼠懸停在某個列上時，應該啟動一些更改：列的背景顏色應該切換為黑色，條紋背景應該從藍色變為黑色，并且背景中的影像應該增長。這一切都適用于單個列。但現在我有 3 列，它只適用于最后一列。我在這個網站上看到的其他問題與我的變數的定義有關，但不知道在哪里更新我的腳本。

我的 html 看起來像這樣，除了 id 之外的每一列都相同：

<div id='research'>
  <div class='textblock'>
  .. my text ...
  </div>
  <div class='myimage koek-achtergrond'>
  .. my background image ...
  </div>
  <div class='myimage koek-stripe'>
  .. my other image ...
  </div>
</div>

這是我的通用代碼：

<script>
function mouseover() {
  console.log('mouse over this column: ',this.id);
  var column = document.getElementById(this.id);
  column.style.backgroundColor = 'black';
  var stripe = document.getElementById(this.id).getElementsByClassName('koek-stripe')[0];
  stripe.classList.add('koek-stripe-hovered');
  var background = document.getElementById(this.id).getElementsByClassName('koek-achtergrond')[0];
  background.classList.add('koek-transform');
}
function mouseleave() {
  console.log('mouse leaves this column: ',this.id);
  var column = document.getElementById(this.id);
  column.style.backgroundColor = 'var(--primary-blue-color)';
  var stripe = document.getElementById(this.id).getElementsByClassName('koek-stripe')[0];
  stripe.classList.remove('koek-stripe-hovered');
  var background = document.getElementById(this.id).getElementsByClassName('koek-achtergrond')[0];
  background.classList.remove('koek-transform');
  console.log('classList after leaving: ',background.classList);
}  
</script>

在每一列中，我添加了一個簡短的腳本，其中僅更改了列名，與 html 中的名稱一致：

<script>
var columnname = 'research';
columnElement = document.getElementById(columnname);
columnElement.onmouseover = function() {
  columnElement.addEventListener('mouseover', mouseover);
}  
columnElement.onmouseleave = function() {
  columnElement.addEventListener('mouseleave', mouseleave);
}  
console.log('kolomdetails: ',columnElement);  
</script>

在我看來，在這種情況下顯示 css 是不相關的，因為問題是指 javascript。問題是應該在通用腳本中添加的類只應用于最后一列。問題是：為什么它們不在前兩列中？我在其他執行緒中看到了一些評論，表明這是 Javascript 中的經典錯誤。所以我希望這可以幫助我更好地理解變數。

uj5u.com熱心網友回復：

考慮使用事件委托。這是一個可重復使用的最小示例：

[`mouseover`, `mouseout`].forEach(h => document.addEventListener(h, handle));

function handle(evt) {
  const el2Handle = evt.target.closest(
    [`.textblock`, `.koek-achtergrond`, `.koek-stripe`]
    .find(c => evt.target.closest(c)) );

  if (el2Handle) {
    el2Handle.style.color = evt.type === `mouseover` ? `red` : ``;
  }
}

#research div {
  cursor: pointer;
}

<div id='research'>
  <div class='textblock'>
    .. my text ...
  </div>
  <div class='myimage koek-achtergrond'>
    .. my background image ...
  </div>
  <div class='myimage koek-stripe'>
    .. my other image ...
  </div>
</div>

uj5u.com熱心網友回復：

是的，這很好用。我采取了下面指出的答案并將其定制為我的最終解決方案：

<script>
  document.addEventListener(`mouseover`, handle);
  document.addEventListener(`mouseout`, handle);

  function handle(evt) {
    const origin = evt.target;
    if ([`.koek-textblock`, `.koek-achtergrond`, `.koek-stripe`].find( c => origin.closest('.koek-kolom'))) {
      kolom = origin.closest('.koek-kolom');
      kolom.style.backgroundColor = evt.type === `mouseover` ? 'black' : ``;
      stripe = kolom.getElementsByClassName('koek-stripe')[0];
      stripe.style.backgroundImage = evt.type === `mouseover` ? "url('https://famnabuurs.nl/wp-content/uploads/2022/10/stripe_zwart.png')": ``;
      backgroundimage = kolom.getElementsByClassName('koek-achtergrond')[0];
      backgroundimage.style.transform = evt.type === `mouseover` ? "scale(1.2) translate(-80px, 40px)" : ``;
    }
  }
</script>

我還在專欄中添加了“koek-kolom”類，所以我確信我找到了合適的父母。如果您愿意，可以在https://famnabuurs.nl/afbeelding-hoveren-improved/上查看結果

標籤：javascripthtml变量

上一篇：smtplib多個附件接收失敗

下一篇：顫振將方法應用于靜態變數