Изменить цвет элемента списка, когда флажок установлен в контактной форме 7 - PullRequest
0 голосов
/ 18 октября 2018

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

Эта тема была моим основным источником вдохновения: https://www.sitepoint.com/community/t/on-click-of-check-box-my-div-border-and-text-color-should-be-in-blue/276230/3

Но я не уверено том, как заставить код работать в редакторе CF7 (я пробовал форумы поддержки в этом плагине, но никто не ответил мне, ха-ха).

Соответствующий код в CF7:

<span onclick="UpdateFeatures(this,false);"> [checkbox* InterestsAndGoals id:getStartedInterestsAndGoals use_label_element "Growth" "Marketing Exposure" "Increase in overall traffic" "Edge over your competition" "Increase in low season traffic"]</span>

Javascript, используемый в CF7:

<script>
function UpdateFeatures(checkbox) {
  console.log(document.querySelector(".wpcf7-list-item"));
  document.querySelector(".wpcf7-list-item").classList.remove("changeColor");
  if (checkbox.checked) {
  document.querySelector(".wpcf7-list-item").classList.add("changeColor");
  }
}
</script>

CSS:

#getStartedInterestsAndGoals input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

span.wpcf7-list-item {
  display: inline-block;
  margin: 0 0 15px 0;
}

.wpcf7-list-item {
  margin: 0 0 20px 1em;
  border: 1px solid #f26922;
  border-radius: 40px;
  text-transform: uppercase;
  font-size: 16px;
  padding: 10px;
  width: 100%;
}

.wpcf7-list-item:hover {
  background-color: #f26922;
  border-color: #333333;
  color: #ffffff;
}
.changeColor {
  background-color: #f26922;
  border-color: #333333;
  color: #ffffff;
}

JSFiddle для демонстрации кода, сделанного из CF7: https://jsfiddle.net/p9wrdsmo/1/

Любая помощь с этим будетс благодарностью!Я не очень хорош в JavaScript и предпочел бы чистый HTML / CSS, но я не верю, что это возможно.

Спасибо !!

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