Добавить класс в другую таблицу, когда переключатель выбран с помощью jquery - PullRequest
0 голосов
/ 09 мая 2019

Класс highlight добавляется в родительскую таблицу независимо от того, какой переключатель выбран.

$('.logo-group').click(function() {
  $(".logo-group").each(function() {
    $(this).closest("table").toggleClass("highlight", $(this).is(":checked"));
  });
});
$('input:radio:checked').trigger('click');
#logo-options .image {
  opacity: .5;
}

table.container.highlight {
  border: 1px solid #aaa !important;
}

table.container.highlight .image {
  opacity: 1 !important;
}

#custom-logo-group {
  opacity: .5;
}

#custom-logo-group.highlight {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<table id="logo-options" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="">
        <table class="container" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="left">
              <div class="title">Default Logo</div>
              <div class="image"><img src="https://osticketawesome.com/+current/scp/images/ost-logo.png" alt="Default Logo"></div>
            </td>
            <td class="right">
              <div class="toggle">
                <input type="radio" value="choose-theme" id="radio3" name="logo-radio" class="switch logo-group" />
                <label for="radio3">&nbsp;</label>
              </div>
            </td>
          </tr>
        </table>
        <table class="container" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="left">
              <div class="title">Custom Text</div>
              <div class="image"><img src="https://osticketawesome.com/+current/scp/images/ost-logo.png" alt="Custom Text"></div>
            </td>
            <td class="right">
              <div class="toggle">
                <input type="radio" value="choose-theme" id="radio4" name="logo-radio" class="switch logo-group" checked />
                <label for="radio4">&nbsp;</label>
              </div>
            </td>
          </tr>
        </table>
        <table class="container" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="left">
              <div class="title">Custom Logo</div>
              <div class="image"><img src="https://osticketawesome.com/+current/scp/images/ost-logo.png" alt="Custom Logo"></div>
            </td>
            <td class="right">
              <div class="toggle">
                <input type="radio" value="choose-theme" id="radio5" name="logo-radio" class="switch logo-group" />
                <label for="radio5">&nbsp;</label>
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

<table>
  <tr>
    <td id="custom-logo-group" class="">hello</td>
  </tr>
</table>

Пока все хорошо.

Но я также хочу, чтобы класс highlight был добавлен к другая таблица с идентификатором custom-logo-group, когда переключатель radio5 выбран = true.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...