点击 JavaScript 切换类

Question

我有一个页面，其中一个部分包含一些用户输入的文本，另一个部分包含 table 该文本中使用了多少动词、名词等。 table 动词等以及文本中这些动词的实例通过它们的 class 以相同的方式设置样式，例如<td style="">Adverb</td> 在 table 和 here 在正文中。

我希望用户能够单击 table 中的项目并在文本中打开和关闭相应的 class 和 table .

例如，在页面侧边栏上，用户看到一个 table，其中一列中包含 verb、adverb、adjective 等字词，这些字词是具有特定颜色的样式（verb 是绿色，adverb 是红色，adjective 是蓝色）。在页面的主要部分，用户会看到他们输入的文本，每个语法类型的示例都具有相同的样式（例如，所有动词都是绿色的，所有副词都是红色的）。

当用户点击边栏中的单词 'adverb' table 我想切换 class="adverb" 在 table 和用户输入的文本因此会影响所应用的样式。

table 和文本的代表性标记如下。非常感谢任何帮助！

    <table class="grammar table table-hover" data-toggle="table" data-sort-name="instance_use" data-sort-order="desc">
       <thead>
          <tr>
             <th style="" data-field="grammar_type" tabindex="0">
                <div class="th-inner sortable both">Grammar Type</div>
                <div class="fht-cell"></div>
             </th>
             <th style="" data-field="instance_use" tabindex="0">
                <div class="th-inner sortable both desc">Instances of Use</div>
                <div class="fht-cell"></div>
             </th>
          </tr>
       </thead>
       <tbody>
          <tr data-index="0">
             <td style=""><span class="adverb">Adverb</span></td>
             <td style="">2 </td>
          </tr>
          <tr data-index="1">
             <td style=""><span class="verb-present">Verb, present</span></td>
             <td style="">2 </td>
          </tr>
          <tr data-index="2">
             <td style=""><span class="determiner">Determiner</span></td>
             <td style="">2 </td>
          </tr>
       </tbody>
    </table>

下面是呈现用户输入内容的标记

     <div id="story_text">
           <span style="white-space: pre-line">
           <span class="adverb">here</span> <span class="verb-present">is</span> <span class="determiner">a</span>
    <span class="adverb">another</span> <span class="verb-present">one</span> <span class="determiner">here </span><span class="adverb">multiple</span> <span class="verb-present">instances</span> <span class="determiner">word</span>
        </div>

Answer 1

看，这是否是您要找的东西

$(document).ready(function() {
  $('.adverb').addClass('adverbFixed');
  $('.verb-present').addClass('verb-presentFixed');
  $('.determiner').addClass('determinerFixed');

  $('.adverbFixed').click(function() {
    $('.adverbFixed').toggleClass('adverb');
  });
  $('.verb-presentFixed').click(function() {
    $('.verb-presentFixed').toggleClass('verb-present');
  });
  $('.determinerFixed').click(function() {
    $('.determinerFixed').toggleClass('determiner');
  });
});

.adverb {
  color: green;
}

.verb-present {
  color: red
}

.determiner {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="grammar table table-hover" data-toggle="table" data-sort-name="instance_use" data-sort-order="desc">
  <thead>
    <tr>
      <th style="" data-field="grammar_type" tabindex="0">
        <div class="th-inner sortable both">Grammar Type</div>
        <div class="fht-cell"></div>
      </th>
      <th style="" data-field="instance_use" tabindex="0">
        <div class="th-inner sortable both desc">Instances of Use</div>
        <div class="fht-cell"></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr data-index="0">
      <td style=""><span class="adverb">Adverb</span></td>
      <td style="">2 </td>
    </tr>
    <tr data-index="1">
      <td style=""><span class="verb-present">Verb, present</span></td>
      <td style="">2 </td>
    </tr>
    <tr data-index="2">
      <td style=""><span class="determiner">Determiner</span></td>
      <td style="">2 </td>
    </tr>
  </tbody>
</table>


<div id="story_text">
  <span style="white-space: pre-line">
           <span class="adverb">here</span> <span class="verb-present">is</span> <span class="determiner">a</span>
  <span class="adverb">another</span> <span class="verb-present">one</span> <span class="determiner">here </span><span class="adverb">multiple</span> <span class="verb-present">instances</span> <span class="determiner">word</span>
</div>

Answer 2

不能 100% 确定这是否是您想要的，当然，您不能自定义颜色。

$(document).ready(function() {

  $("table .adverb").click(function() {
    toggleClass('adverb');
  });
  $("table .verb-present").click(function() {
    toggleClass('verb-present');
  });
  $("table .determiner").click(function() {
    toggleClass('determiner');
  });
});

function toggleClass(className){
    if ($("#story_text").hasClass(className)) {
      $("#story_text").removeClass(className);
    } else {
      $("#story_text").removeClass();
      $("#story_text").addClass(className);
    }
}

.adverb .adverb, table .adverb {
  color: red;
}
.verb-present .verb-present, table .verb-present {
  color: green;
}
.determiner .determiner, table .determiner {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="grammar table table-hover" data-toggle="table" data-sort-name="instance_use" data-sort-order="desc">
  <thead>
    <tr>
      <th style="" data-field="grammar_type" tabindex="0">
        <div class="th-inner sortable both">Grammar Type</div>
        <div class="fht-cell"></div>
      </th>
      <th style="" data-field="instance_use" tabindex="0">
        <div class="th-inner sortable both desc">Instances of Use</div>
        <div class="fht-cell"></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr data-index="0">
      <td style=""><span class="adverb">Adverb</span></td>
      <td style="">2 </td>
    </tr>
    <tr data-index="1">
      <td style=""><span class="verb-present">Verb, present</span></td>
      <td style="">2 </td>
    </tr>
    <tr data-index="2">
      <td style=""><span class="determiner">Determiner</span></td>
      <td style="">2 </td>
    </tr>
  </tbody>
</table>

<div id="story_text">
  <span style="white-space: pre-line">
       <span class="adverb">here</span> <span class="verb-present">is</span> <span class="determiner">a</span>
  <span class="adverb">another</span> <span class="verb-present">one</span> <span class="determiner">here </span><span class="adverb">multiple</span> <span class="verb-present">instances</span> <span class="determiner">word</span>
</div>

Answer 3

最后，我创建了一个解决方案，该解决方案使用 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

中记录的 Element.classList.toggle 选项

function toggleClass(obj) {
  const className = obj.classList[0];
  document.querySelectorAll('.' + className).forEach(element => {
    element.classList.toggle('blank');
  });
}

在 table <td style="">Adverb</td>

中的每个项目上调用

这实现了一些 CSS 来覆盖现有的样式

.blank {
  border: 0;
  color: black !important;
}

我在这个问题上得到了@CertainPerformance的帮助

点击 JavaScript 切换类

Toggle classes on click with JavaScript

javascript

onclick

toggle

点击 JavaScript 切换 类

Toggle classes on click with JavaScript

javascript

onclick

toggle

点击 JavaScript 切换类