jQuery не работает должным образом на блоках Гутенберга (Wordpress) - PullRequest
Новая
       32

jQuery не работает должным образом на блоках Гутенберга (Wordpress)

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

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

У меня есть очень простой фрагмент кода, чтобы работать, когда я создаю страницу как файл HTML. Я поместил файл. js в документе и тег перед закрывающим телом, потому что я прочитал, что это хорошая практика. Однако я не всегда должен воспроизводить один и тот же эффект, когда код загружен в виде файла PHP. Я использовал Stock Lab для создания своих блоков, и эффект подсветки работает в некоторых случаях, но не во всех. Я использую несколько экземпляров одного и того же блока для разных типов контента.

Когда эффект выделения работает, он работает только в одном экземпляре того же блока, как вы можете видеть в этом примере, но не в остальных , В этом случае он работает только в последнем случае, но раньше он был первым, а не последним, когда я предпринял другие попытки.

Интересно, есть ли что-то, что я пропускаю в моем jQuery коде, который может интерпретировать все экземпляры этого элемента как независимые части, если это действительно проблема. Код ниже представляет точно такой же код, который я использовал в своем блоке Wordpress. Как видите, он работает на всех экземплярах таблицы, тогда как по приведенной ранее ссылке он изменяет только один из них.

Чего мне не хватает? Как вставить фрагмент кода jQuery в блок Гутенберга, который независимо воспроизводится в разных его экземплярах?

Спасибо. 

$('.row').click(function() {
	$(this).toggleClass('highlight');
});
.container {
  width: 70%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 30px 30px;
}
.table-wrapper {
  width: 100%;
  border-radius: 10px;
  border-bottom: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  overflow: hidden;
}
.table {
  width: 100%;
  display: table;
  margin: 0;
}

.highlight {
  background-color: #ececff;
}

.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;
}

p {
margin-bottom: 0em;
}

.row .cell {
  font-family: Helvetica;
  font-size: 16px;
  line-height: 1.4em;
  font-weight: unset !important;
  padding-bottom:20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;

}
.table-header .cell {
  font-family: Montserrat, Helvetica;
  font-size: 18px;
  line-height: 1em;
  font-weight: unset !important;
  padding-bottom:20px;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
}

.row .cell:nth-child(1) {
  width: 100% padding-left: 40px;
}

.row .cell:nth-child(2) {
  width: 50%
}

.row:hover {
  background-color: #ececff;
  cursor: pointer;
}

.highlight {
  background-color: #ececff;
}

.table, .row {
  width: 100% !important;
}
<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><?php block_field ('a1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('a2');?></p>
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p><?php block_field ('b1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('b2');?></p>
        </li>
      </ul>
    </div>
  </div>
</div>


<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><?php block_field ('a1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('a2');?></p>
        </li>
      </ul>
      <ul class="row">
        <li class="cell">
          <p><?php block_field ('b1');?></p>
        </li>
        <li class="cell">
          <p><?php block_field ('b2');?></p>
        </li>
      </ul>
    </div>
  </div>
</div>

1 Ответ

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

Вместо использования $, используйте ключевое слово jQuery ($ не будет вызывать jquery в wordpress): 

jQuery('.row').click(function() {
    jQuery(this).toggleClass('highlight');
});
...