Question

如果我点击.leftcol中的某些SOME TEXT项目，我想这样做，它会使具有相同第二类的.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类捕获任何元素的click事件，然后在$(this).attr("class").split(' ')[1]的帮助下阅读该元素的第二个类：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用属性包含选择器.split()，.pop()

＆＃13;

$(document).ready(function() {
  $('.leftcol').click(function() {
    $('.rightcol[class*=' + this.className.split(" ").pop() + ']')
    .css('color', 'blue');
  });
});

＆＃13;

<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>

＆＃13;

Answer 3

您可以在类属性

上使用split方法

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

Answer 4

当单击类.right且匹配第二类的元素时，此函数将找到具有类.left的元素的第二类的每个实例。通过分别更改.left和.right类，此功能可应用于HTML布局。

段

＆＃13;

$(function() {
  $('.left').on('click', function(e) {
    var self = this;
    var cat = self.classList.item(1).toString();
    $('.right').each(function() {
      if ($(this).hasClass(cat)) {
        $(this).css('color', 'red');
      }
    });
  });
});

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='categories'>
  <caption>Categories</caption>
  <thead>
    <tr>
      <th>Description</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='left astronomy'>DATA</td>
      <td class='right astronomy'>Astronomy</td>
    </tr>
    <tr>
      <td class='left zoology'>DATA</td>
      <td class='right zoology'>Zoology</td>
    </tr>
    <tr>
      <td class='left psychology'>DATA</td>
      <td class='right psychology'>Psychology</td>
    </tr>
    <tr>
      <td class='left zoology'>DATA on Zoology</td>
      <td class='right astronomy'>Astronomy</td>
    </tr>
    <tr>
      <td class='left astronomy'>DATA on Astronomy</td>
      <td class='right psychology'>Psychology</td>
    </tr>
    <tr>
      <td class='left psychology'>DATA on Psychology</td>
      <td class='right zoology'>Zoology</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 5

很少有建议：

左侧和右侧列表可以包含在父ul中，其中包含课程<ul class="leftcol">和<ul class="rightcol">
click事件处理程序可以附加到左侧列表项，右侧列表可以控制，如下面的示例所示：

$(document).ready(function() {
  $(".leftcol li").click(function(event) {
    // Get the `class` of clicked element in the left-list
    var myClass = $(this).attr('class');

    // Default the right-list style 
    $(".rightcol li").css({
      "color": "red"
    });

    // Check if any list item on the right-side has the same class and action it based on that. 
    var rightColumnSelector = ".rightcol li." + myClass;
    $(rightColumnSelector).css({
      "color": "green"
    });

  });
});

.leftcol,
.rightcol {
  display: inline-block;
  width: 40%;
}

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

如何检测元素的类

5 个答案:

段