根据字符串包含的内容隐藏和显示HTML元素

Question

我需要帮助找出如何隐藏/显示基于字符串是否包含单词的HTML元素。

在我的style标签中：

#Assignment-1 {
  display:none;
}

#Assignment-2 {
  display:none;
}

#Assignment-3 {
  display:none;
}

在结束body标签之前的底部，我有：

<script type="text/javascript">

   var str = "Artist, Special"

   if($(str.includes("Artist")){
     document.getElementById('Assignment-1').style.display = "block";
   }

   if($(str.includes("Release")){
     document.getElementById('Assignment-2').style.display = "block";
   }

   if($(str.includes("Special")){
     document.getElementById('Assignment-3').style.display = "block";
   }

</script>

Answer 1

为什么在if条件之前有一个$(？删除这些字符。

​

var str = "Artist, Special";

if (str.includes("Artist")) {
  document.getElementById('Assignment-1').style.display = "block";
}

if (str.includes("Release")) {
  document.getElementById('Assignment-2').style.display = "block";
}

if (str.includes("Special")) {
  document.getElementById('Assignment-3').style.display = "block";
}

#Assignment-1 { display: none; }
#Assignment-2 { display: none; }
#Assignment-3 { display: none; }

<div id="Assignment-1">Assignment 1</div>
<div id="Assignment-2">Assignment 2</div>
<div id="Assignment-3">Assignment 3</div>

​

一种更好的方法是使用类名：

​

const str = "Artist, Special";
const assignments = document.querySelectorAll('.assignment');

assignments[0].classList.toggle('show', str.includes("Artist"));
assignments[1].classList.toggle('show', str.includes("Release"));
assignments[2].classList.toggle('show', str.includes("Special"));

.assignment { display: none; }
.show       { display: block; }

<div class="assignment">Assignment 1</div>
<div class="assignment">Assignment 2</div>
<div class="assignment">Assignment 3</div>

​