Question

我无法弄清楚为什么jQuery会将所需的新类应用到正文中，这使得第一个条件始终不受不同条件的影响。

HTML包含以下不同的标记：

 <h1 class="entry-title">Intro Audios</h1>
 <h1 class="entry-title">Level 1 Audios</h1>
 <h1 class="entry-title">Level 2 Audios</h1>  
 <h1 class="entry-title">Level 3 Audios</h1>

确切地说，16页确实包含h1标签，另外16页包含上面的h1标签，依此类推。

但无论我访问哪个页面，添加到body标签的类总是＆＃34; Level-1＆＃34;

<script>
  jQuery(document).ready(function($){

var level1 = $("h1.entry-title:contains(Level 1)");
var level2 = $("h1.entry-title:contains(Level 2)");
var level3 = $("h1.entry-title:contains(level 3)");

if ( level1)
 {
$(document.body).addClass('level-1');
 } else if (level2 )
 {
$(document.body).addClass('level-2');
 }  else if (level3 )
 {
$(document.body).addClass('level-3');
 } else 
 {
 $(document.body).addClass('intro');

 }
 });

 </script>

我做错了什么？

Answer 1

试试这个小提琴，https://jsfiddle.net/djkk8yrg/ 检查控制台记录level1和level2 vars的位置，并且level1没有相应的html代码他们回来了：

[prevObject: jQuery.fn.init[1]]
[h1.entry-title, prevObject: jQuery.fn.init[1]]

即使html中没有level1元素，它也只返回prevObject。添加其他逻辑以确认它不仅是返回的prevObject。

Answer 2

我想要做的是能够根据特定wordpress类别存在与否的条件向body标签添加一个类。如果它存在，则将类添加到body标签，以便我可以根据新的body类不同地对每个页面进行样式化。

在尝试和测试不同的答案和代码一段时间之后，我找到了一个解决方案，这就是：

 <script>
 jQuery(document).ready(function($){

 var intro = $( "article" ).hasClass( "category-level-intro" );
 var level_1 = $( "article" ).hasClass( "category-level-1" );
 var level_2 = $( "article" ).hasClass( "category-level-2" );
 var level_3 = $( "article" ).hasClass( "category-level-3" );

 // check to see if the condition is true
 if(intro === true)
  {
  $(document.body).addClass('intro');
  } else if  (level_1 === true)
  {
  $(document.body).addClass('level-1');
  } else if  (level_2 === true)
  {
  $(document.body).addClass('level-2');    
  } else if (level_3 === true )
  {
  $(document.body).addClass('level-3');    
  } else {
  $(document.body).addClass('');  
  }
  });
  </script>

谢谢！

在所有情况下，条件在第一个条件下评估为True

2 个答案: