javascript - Jquery 类名启动选择器在两种不同情况下不起作用

Question

代码对前 3 个有效，但对后 3 个无效。可能的原因是什么？

$(document).ready(function(){
    $("section[class^='steps-']").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--hiding-->     

    <section class="steps-1">
    	<h1>Hidden</h1>
    </section>
    <section class="steps-2">
    	<h1>hidden</h1>
    </section>

<!--not hiding-->

    <section class="another-class steps-3">
    	<h1>not hiding</h1>
    </section>
    <section class="another-class steps-4">
    	<h1>not hiding</h1>
    </section>

Answer 1

这两个元素还包含另一个类的原因。 在这种情况下attribute-contains-selector选择器将检查值是否包含给定的子字符串。

$(document).ready(function() {
  $("section[class*='steps-']").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="steps-1">
  <h1>Hidden</h1>
</section>
<section class="steps-2">
  <h1>hidden</h1>
</section>
<section class="another-class steps-3">
  <h1>not hiding</h1>
</section>
<section class="another-class  steps-4">
  <h1>not hiding</h1>
</section>