Переключать классы по клику с помощью JavaScript

Question

У меня есть страница, которая содержит некоторый введенный пользователем текст в одном разделе, а в другом разделе - таблицу того, сколько глаголов, существительных и т. Д. Используются в этом тексте. Таблица глаголов и т. Д., А также экземпляры этих глаголов в тексте оформляются таким же образом через их класс, например. <td style=""><span class="adverb">Adverb</span></td> в таблице и <span class="adverb">here</span> в тексте.

Я бы хотел, чтобы пользователь мог щелкнуть по элементу в таблице, а также включить или отключить соответствующий класс в тексте и таблице.

Например, на боковой панели страницы пользователь видит таблицу, в которой в одном столбце есть слова 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

Не уверен на 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 2

В конце концов, я создал решение, которое использует параметр Element.classList.toggle, задокументированный в https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

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

, который вызывается для каждого элемента в таблице <td style=""><span class="adverb" onclick="toggleClass(this)">Adverb</span></td>

Это реализует некоторый CSS для переопределения существующих стилей

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

В этом вопросе мне помог @CertainPerformance в этом вопросе Как правильно переключать классы с помощью document.getElementsByClassName и Element.classList

Answer 3

Смотрите, если это то, что вы ищете

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