Элемент читает jQuery код только один раз в Wordpress - PullRequest
Новая
       24

Элемент читает jQuery код только один раз в Wordpress

0 голосов
/ 19 марта 2020

Я пытаюсь создать таблицу div для использования в Wordpress в качестве блока многократного использования.

Я бы хотел, чтобы при клике менялся цвет фона всей строки. Мне удалось это сделать, но когда я вставляю несколько экземпляров одной и той же таблицы (так как это многократно используемый блок, все они имеют один и тот же класс), этот эффект появляется только в первом экземпляре таблицы.

При попытке выбрать строки в разных таблицах ничего не происходит.

Вот мой стол: 

$('.row').click(function() {
  if ($(this).attr('att') == 0) {
    $(this).css('background', '');
    $(this).attr('att', 1);
  } else {
    $(this).css('background', '#ececff');
    $(this).attr('att', 0);
  }
});
.row {
  display: table-row;
  background: #fff;
}

.table-header {
  display: table-header-group;
  color: #ffffff;
  background: #6c7ae0;
  border-bottom: 1px solid #f2f2f2;
  margin: 0;
}

.cell {
  display: table-cell;
}

.row .cell {
  font-size: 16px;
  color: #666666;
  line-height: 1.4em;
  font-weight: unset !important;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="table-wrapper">
    <div class="table">
      <ul class="table-header">
        <li class="cell">
          Title 01
        </li>
        <li class="cell">Title 02
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p>Element01.1</p>
        </li>
        <li class="cell">
          <p>Element01.2</p>
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p>Element02.1</p>
        </li>
        <li class="cell">
          <p>Element02.2</p>
        </li>
      </ul>
    </div>
  </div>
</div>

Я пытаюсь найти решение, позволяющее пользователю выбирать разные строки в независимых таблицах (и иметь возможность отменить их выбор, если они хотят).

Есть идеи, как это сделать? Я не очень уверен в jquery, и я в растерянности.

Большое спасибо.

1 Ответ

0 голосов
/ 10 апреля 2020

Не используйте $ для вызова jQuery в WordPress, замените $ s на jQuery: 

jQuery('.row').click(function() {
  if (jQuery(this).attr('att') == 0) {
    jQuery(this).css('background', '');
    jQuery(this).attr('att', 1);
  } else {
    jQuery(this).css('background', '#ececff');
    jQuery(this).attr('att', 0);
  }
});
...