javascript - 如何检测元素的类别

Question

如果我点击 .leftcol 中的某些文本元素，我想这样做，它会使具有相同 第二类别 的 .rightcol 元素变为红色。

但我需要在一个独特的函数中使用它，因此应该使用代码检测第二个类。

我不知道如何完成脚本:

$(document).ready(function() {
  $('.leftcol DETECT SECOND CLASS').click(function() {
    $('.rightcol DETECT SECOND CLASS').css('color', 'red');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="leftcol aerospace-defense">SOME TEXT</li>
<li class="leftcol business-enablement">SOME TEXT</li>
<li class="leftcol cardiology">SOME TEXT</li>
<li class="leftcol cell-biology">SOME TEXT</li>


<li class="rightcol aerospace-defense" style="color: red;">Aerospace & Defense</li>
<li class="rightcol business-enablement" style="color: red;">Business Enablement</li>
<li class="rightcol cardiology" style="color: red;">Cardiology</li>
<li class="rightcol cell-biology" style="color: red;">Cell Biology</li>

Answer 1

这里的技巧是用 leftcol 类捕获任何元素的点击事件，然后借助 $(this) 读取该元素的第二个类是什么。 attr("类").split(' ')[1]:

$(document).ready(function(){
  $('.leftcol').click(function() {
    var secondClass = $(this).attr("class").split(' ')[1]
    $('.rightcol.' + secondClass).css('color', 'blue');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="leftcol aerospace-defense">SOME TEXT</li>
<li class="leftcol business-enablement">SOME TEXT</li>
<li class="leftcol cardiology">SOME TEXT</li>
<li class="leftcol cell-biology">SOME TEXT</li>
</ul>
<ul>
<li class="rightcol aerospace-defense" style="color: red;">Aerospace & Defense</li>
<li class="rightcol business-enablement" style="color: red;">Business Enablement</li>
<li class="rightcol cardiology" style="color: red;">Cardiology</li>
<li class="rightcol cell-biology" style="color: red;">Cell Biology</li>
</ul>