突出显示相应的跨度，当其中一个为空时添加另一种颜色

问题描述 投票：0回答：2

我想创建一个 JS 脚本来突出显示在两个不同容器中具有相应索引的跨度。我设法创建了该脚本并且它可以工作，但是，我想添加一个细节：当两个相应的跨度之一为空时，另一个应该以不同的颜色突出显示。

我试过这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Textes en Parallèle</title>

<style>
body {
    display: flex;
}

.text-container {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;
}

.highlight {
    background-color: yellow;
}

.highlight-empty {
       background-color: #8eff8e; /* Couleur verte pour le surlignage */
   }

</style>

</head>
<body>
    <div class="text-container" id="text1">
        <!-- first version of the text -->
        <span>span1.</span> common text
        <span>span 2.</span>
        <span></span>
    </div>
    <div class="text-container" id="text2">
        <!-- second version of the text -->
        <span>corresponding span 1.</span> common text
        <span>corresp span 2</span>
        <span>add => empty span on the other side</span>
    </div>
    <script>

    document.addEventListener('DOMContentLoaded', function () {
        const textContainers1 = document.getElementById('text1').querySelectorAll('span');
        const textContainers2 = document.getElementById('text2').querySelectorAll('span');

        function addHighlight(index) {
            textContainers1[index].classList.add('highlight');
            textContainers2[index].classList.add('highlight');
        }

        function removeHighlight(index) {
            textContainers1[index].classList.remove('highlight');
            textContainers2[index].classList.remove('highlight');
        }

        textContainers1.forEach((paragraph1, index) => {
            paragraph1.addEventListener('mouseover', () => {
                if (textContainers2[index].innerHTML.trim() === '') {
                    textContainers2[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph1.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers2[index].classList.remove('highlight-empty');
            });
        });

        textContainers2.forEach((paragraph2, index) => {
            paragraph2.addEventListener('mouseover', () => {
                if (textContainers1[index].innerHTML.trim() === '') {
                    textContainers1[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph2.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers1[index].classList.remove('highlight-empty');
            });
        });
    });

    </script>
</body>

</html>

我不明白为什么我的 add => 另一侧的空跨度在我结束时仍然是黄色而不是绿色。你知道我的 JS 条件有什么问题吗？

提前非常感谢您，

javascript hover highlight
2个回答
1
投票

这里有两个问题。首先，您的逻辑仅将 

.highlight-empty
类添加到空的 
span
中。因此没有显示出任何差异。您需要修改逻辑以将该类添加到 
span
中，其中 does 有内容，以便它产生效果。

其次，您需要使 CSS 中的 

.highlight-empty
类具有更高的特异性，以便它覆盖 
.highlight
类。执行此操作的简单方法是向其中添加另一个选择器。

这是进行了这些更改的工作版本：

document.addEventListener('DOMContentLoaded', function() {
  const textContainers1 = document.getElementById('text1').querySelectorAll('span');
  const textContainers2 = document.getElementById('text2').querySelectorAll('span');

  function addHighlight(index) {
    textContainers1[index].classList.add('highlight');
    textContainers2[index].classList.add('highlight');
  }

  function removeHighlight(index) {
    textContainers1[index].classList.remove('highlight');
    textContainers2[index].classList.remove('highlight');
  }

  textContainers1.forEach((paragraph1, index) => {
    paragraph1.addEventListener('mouseover', () => {
      if (textContainers2[index].innerHTML.trim() === '' || textContainers1[index].innerHTML.trim() === '') {
        textContainers1[index].classList.add('highlight-empty');
        textContainers2[index].classList.add('highlight-empty');
      }
      addHighlight(index);
    });

    paragraph1.addEventListener('mouseout', () => {
      removeHighlight(index);
      textContainers2[index].classList.remove('highlight-empty');
    });
  });

  textContainers2.forEach((paragraph2, index) => {
    paragraph2.addEventListener('mouseover', () => {
      if (textContainers2[index].innerHTML.trim() === '' || textContainers1[index].innerHTML.trim() === '') {
        textContainers1[index].classList.add('highlight-empty');
        textContainers2[index].classList.add('highlight-empty');
      }
      addHighlight(index);
    });

    paragraph2.addEventListener('mouseout', () => {
      removeHighlight(index);
      textContainers1[index].classList.remove('highlight-empty');
    });
  });
});
body {
  display: flex;
}

.text-container {
  flex: 1;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: scroll;
  max-height: 300px;
}

.highlight {
  background-color: yellow;
}

.highlight.highlight-empty {
  background-color: #8eff8e;
  /* Couleur verte pour le surlignage */
}
<body>
  <div class="text-container" id="text1">
    <span>span1.</span> common text
    <span>span 2.</span>
    <span></span>
  </div>
  <div class="text-container" id="text2">
    <span>corresponding span 1.</span> common text
    <span>corresp span 2</span>
    <span>add => empty span on the other side</span>
  </div>

0
投票

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Textes en Parallèle</title>

<style>
body {
    display: flex;
}

.text-container {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: scroll;
    max-height: 300px;
}

.highlight {
    background-color: yellow;
}

.highlight-empty {
       background-color: #8eff8e; /* Couleur verte pour le surlignage */
   }

</style>

</head>
<body>
    <div class="text-container" id="text1">
        <!-- first version of the text -->
        <span>span1.</span> common text
        <span>span 2.</span>
        <span></span>
        <span>span4</span>
    </div>
    <div class="text-container" id="text2">
        <!-- second version of the text -->
        <span>corresponding span 1.</span> common text
        <span>corresp span 2</span>
        <span>add => empty span on the other side</span>
        <span></span>
    </div>
    <script>

    document.addEventListener('DOMContentLoaded', function () {
        const textContainers1 = document.getElementById('text1').querySelectorAll('span');
        const textContainers2 = document.getElementById('text2').querySelectorAll('span');

        function addHighlight(index) {
            textContainers1[index].classList.add('highlight');
            textContainers2[index].classList.add('highlight');
        }

        function removeHighlight(index) {
            textContainers1[index].classList.remove('highlight');
            textContainers2[index].classList.remove('highlight');
        }

        textContainers1.forEach((paragraph1, index) => {
            paragraph1.addEventListener('mouseover', () => {
                if (textContainers2[index].innerHTML.trim() === '') {
                    textContainers1[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph1.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers1[index].classList.remove('highlight-empty');
            });
        });

        textContainers2.forEach((paragraph2, index) => {
            paragraph2.addEventListener('mouseover', () => {
                if (textContainers1[index].innerHTML.trim() === '') {
                    textContainers2[index].classList.add('highlight-empty');
                }
                addHighlight(index);
            });

            paragraph2.addEventListener('mouseout', () => {
                removeHighlight(index);
                textContainers2[index].classList.remove('highlight-empty');
            });
        });
    });

    </script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.