javascript - 如果页面上的

Question

我想使用 Javascript 将类或内联 CSS 添加到特定 ID，但前提是 <h1>页面上的标签包含数组中特定单词或单词的精确匹配。

我在页面上隐藏了一个 div，并且只希望它在标签等于特定单词或特定单词时显示。下面是我要做的工作，但没有使用数组。

$('h1').each(function () {
    if ($(this).text() == 'exampleText') {
        $('#bannerIMG').addClass("showID");
    }
});

我还尝试使用 :contains，它有效，但它没有显示基于精确匹配的 div。例如，div 将显示包含“示例文本”和“示例”的 h1 标签，但我只希望它显示等于“示例文本”的 h1 标签

var exampleArray = ['text1', 'text2', 'multiple words1', 'multiple words2'];

    $('h1').each(function () {
        if ($(this).text() == exampleArray) {
            $('#bannerIMG').addClass("showID");
        }
    });

我想要一个包含 h1 标签列表的数组，其中包含不同页面的名称，并且我希望某个 div 仅显示在我在数组中列出的页面上。提前感谢您的帮助!

Answer 1

您可以使用includes()或indexOf()来进行检查。

trim() 方法删除字符串两侧的空格。

var exampleArray = ['text1', 'text2', 'multiple words1', 'multiple words2'];

$('h1').each(function() {
  if (exampleArray.includes($(this).text().trim())) {
    $('#bannerIMG').addClass("showID");
  }
});

.showID {
  display: block !important;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<h1>
  text1
</h1>

<div id="bannerIMG" style="display:none;">ABC</div>