Question

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

我希望用户能够单击表中的项目，并希望文本和表中的相应类可以打开和关闭。

例如，用户在页面侧栏上看到一个表格，该表格的一列中包含verb，adverb，adjective等单词，并且这些单词的样式采用特定颜色（ verb为绿色，adverb为红色，adjective为蓝色）。在页面的主要部分，用户可以看到他们输入的文本，并且每个语法类型的示例都具有相同的样式（例如，所有动词为绿色，所有副词为红色）。

当用户单击侧边栏表中的单词“副词”时，我想切换class="adverb"在表和用户输入的文本中是否出现，从而影响所应用的样式

下面是表格和文本的预设标记。任何帮助，不胜感激！

    <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');
  });
}

在表<td style="">Adverb</td>中的每个项目上被调用

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

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

在这个问题How to correctly toggle classes using document.getElementsByClassName and Element.classList

中，@ CertainPerformance帮助了我

使用JavaScript切换点击类

3 个答案: